CODEWITHSUNDEEP
javascriptvue.js
theFrontEndDev
theFrontEndDev

Reputation: 973

Vuejs : Flag icon not coming in language dropdown as there is mismatch in flag code and language code

I want have displayed flag adjacent to the language in language dropdown. The code is like this :

<b-dropdown-item v-for="language in availableLanguages" :key="language.name" :value="language.code">
  <div class="d-flex">
    <flag :iso="language.code"/>
    <span>{{language.name}}</span>
  </div>
</b-dropdown-item>

enter image description here

The flags are not coming for english and danish. The problem being, for english the language.code is en and the flag is the code - gr. Can we get any workaround for this without changing the api response coming from backend ?

Upvotes: 1

Views: 3750

Answers (1)

Denis Tsoi
Denis Tsoi

Reputation: 10414

add a ternary inline where you've defined :iso=

You've used https://github.com/vikkio88/vue-flag-icon, so was able to find the country codes for uk and denmark.

You can use an inline ternary or

You can define a method to return the appropriate flag code

inline ternary

<b-dropdown-item v-for="language in availableLanguages" :key="language.name" :value="language.code">
  <div class="d-flex">
    <flag :iso="language.code === 'en' ? 'gb' : language.code === 'da' ? 'dk' : language.code"/>
    <span>{{language.name}}</span>
  </div>
</b-dropdown-item>

method

<b-dropdown-item v-for="language in availableLanguages" :key="language.name" :value="language.code">
  <div class="d-flex">
    <flag :iso="flagCode(language.code)"/>
    <span>{{language.name}}</span>
  </div>
</b-dropdown-item>

// <script>
method: {
  flagCode: (code) {
    return code === 'en' ? 'gb' : code === 'da' ? 'dk' : language.code;
  }
}

Upvotes: 2

Related Questions