Vuejs: The flag icon is not displaying correctly in the language dropdown due to a discrepancy between the flag code and the language code

I need to show a flag next to the language in the language dropdown menu. Here's the code snippet:

<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>

https://i.sstatic.net/nml2X.png

The flags are not displaying for English and Danish languages. The issue is that for English, the language code is "en" but the flag code is "gr". Is there a way to work around this without changing the backend API response?

javascriptvue.js

Answer №1

Include a ternary operation within the definition of :iso=

You have utilized https://github.com/vikkio88/vue-flag-icon, which helped in obtaining the country codes for the UK and Denmark.

You can opt for an inline ternary or

You may create a method to provide the correct 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;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"An unusual blend of TWEENJS and threejs creating a mesmerizing

Having successfully created one animation loop with tweenjs, I am now eager to develop an infinite moving animation from top to bottom. However, I am facing some bugs in my code and require assistance! You can check out the code here. var group_posi ...

javascriptthree.jstweenjs

jQuery does not have the capability to automatically calculate Value Added Tax on form submissions

I have included this section in my form to calculate the value added tax (VAT): <div class="col-md-4"> <div class="form-check"> <input type="radio" id="vat_on" name="vat" value=&q ...

javascriptjqueryajax

Unlock the Power of Rendering MUI Components in ReactJS Using a For Loop

Hey there! Hope everything is going well. I've been working on a fun project creating an Advent/Chocolate Box Calendar using ReactJS. One challenge I'm facing is figuring out how to iterate over a for loop for each day in December and render it ...

javascriptreactjsmaterial-ui

Transforming mp4 or Avi files into m3u8 using only node js

I'm currently exploring ways to convert a mp4 or .avi file to .m3u8 using pure node js (specifically, a Firebase Cloud Function). Does anyone have any suggestions? Thank you, but I've already attempted the following: const ffmpegInstaller = requ ...

javascriptnode.jsgoogle-cloud-functionsmp4m3u8

How do you retrieve an element using its tag name?

Just delving into the world of API's here. Working on a project involving loading a DIV with a bunch of links that I need to repurpose. Managed to disable the default onclick function, now trying to figure out how to save the "innerHTML" attribute of ...

javascriptjquerythisgetelementsbytagname

What is the process for pausing a video while it is still buffering and loading?

Is it possible to suspend a video when it is in an opening or preparing state? For example, if I open a video and then switch to another application using the smart hub feature, how can I suspend the video while it is in the process of opening or preparin ...

javascriptjquerytizentizen-web-app

Generating a new Vue project can be done in two ways: using the command `npm init vue@latest` or `vue create <projectName>`

After exploring, I've come across two methods to kickstart a new Vue project: npm init vue@latest and vue create <projectName> Both serve the purpose, but they include different packages altogether. Despite the fact that you customize the p ...

vue.js

Preserving text input with line breaks in a MERN Stack application

Can you help with saving multiple paragraphs in MongoDB? I have a textarea where users can input multiple paragraphs, but the line space is not being saved correctly in the database. Here is how I want the submitted data to look: Lorem ipsum dolor sit am ...

javascriptreactjsexpressmongoosemern

Leverage the worker-loader in conjunction with vue-cli and webpack

Currently, I am in the process of setting up worker-loader with vue-cli webpack installation. The file structure for build / configuration looks like this: -build --vue-loader.conf.js --webpack.base.conf.js --other build files... -config --index.js --dev. ...

vue.jsbabeljsweb-worker

What is the best way to extract all <tr> elements from a <tbody> and then convert them into a String?

Below is an example of an HTML table: <table id="persons" border="1"> <thead id="theadID"> <tr> <th>Name</th> <th>sex</th> <th>Message</th> </ ...

javascriptjquerystringhtml-table

Error: Jest encounters an unexpected token 'export' when using Material UI

While working on my React project and trying to import { Button } from @material-ui/core using Jest, I encountered a strange issue. The error message suggested adding @material-ui to the transformIgnorePatterns, but that didn't resolve the problem. T ...

javascriptreactjsjestjsmaterial-ui

Can you explain the Vue Options API to me?

Vue 3 introduces the Composition API as a new way to structure Vue components, serving as an alternative to the traditional Options API. However, I'm struggling to come across a straightforward explanation of what exactly the Options API entails - can ...

vue.jsvuejs2vue-options-api

Organize every rectangle and text element in D3 into distinct groups

Currently, I am working on creating a bar graph using d3.js. The goal is to display text on top of each bar when the user hovers over it. To achieve this, the <text> and <rect> elements need to be grouped inside a <g> element. For Exampl ...

javascripthtmld3.js

Using Angular 2: Exploring the power of observables for broadcasting events during a forEach loop

Upon testing the service within a forEach loop, I noticed that the parameter I passed to the service ended up being the last one in the iteration. I initially suspected that the issue was due to closures, so I attempted using an anonymous function to add ...

javascriptangularforeach

Click the closest checkbox when the value equals the Jquery datatable

I am facing an issue where I need to add a class and click on a specific element in each row of my jQuery datatable if a certain value is equal. However, I am unable to successfully add the class to that element and trigger a click event. <table id="us ...

javascriptjqueryhtmlcss

What is the proper way to initialize MongoDB and Express?

I have a unique app that utilizes express and interacts with mongodb. Here is how I typically kickstart my app: 1. Launch Mongodb mongod --dbpath data --config mongo.conf" 2. Initiate Express node server.js My pondering is, can these processes be comb ...

javascriptnode.jsmongodbexpress

Remove extra spaces during Vue template compilation

Using Prettier to format the <script> section in my Vue project has hit a snag. Prettier also formats the <template>, which I'm fine with, but there's an issue. The problem arises when there is a list in the template. Prettier forma ...

vue.jsprettier

Next.js app experiencing issues with Chakra UI not transitioning to dark mode

After attempting to incorporate Chakra UI into my Next.js application, I carefully followed every step outlined in their documentation: Despite setting the initialColorMode to "dark" for the ColorModeScript prop, it seems that the dark mode is not being a ...

javascriptreactjsnext.jschakra-ui

Implementing the removal of selected rows in MVC using JQuery

How can I remove a checked row from a table in asp.net MVC using jQuery? Below is the code I have tried, but it's not working. Any suggestions would be greatly appreciated. function saveOrder(data) { return $.ajax({ contentType: ...

javascriptjqueryhtmlasp.netasp.net-mvc-4

Trying out Vuex mutation and reducers with Vue3 and Vue-test-utils

Currently in the process of transitioning to Vue3, so I ask for understanding in not immediately utilizing Pinia. My reducer is structured like this: export const mutations: MutationTree<UiState> = { SET_LOADING: (state, loading) => { Object ...

vue.jsvuejs2vuejs3vuex