Add a new string to a class within a Vue.js component

Hey there, currently working on a Vue component where I am iterating through a list of countries. Here's how it looks:

<div v-for="i in countries" :key="i.id">
  {{i.name}}
  <span class="flag-icon-gr"></span>

I want to dynamically change the flag icon at the end based on the country label I receive from the loop. For instance, I would like the flag-icon-fr for France. Is there a specific way to achieve this?

P.S.: I'm using Nuxt, but I believe the process would be similar for a regular Vue.js component.

Answer №1

To dynamically apply a class binding, you can utilize the following syntax:

<span :class=:icon="'fa-star' + i.title"></span>

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

Show HTML element after scrolling 50 pixels on the page

I am looking to add a feature in my Angular application where a DOM element becomes visible as soon as the user scrolls down by 50 pixels. Is there a method or process available within Angular to achieve this effect? ...

Launching a Web Application developed using the vue framework

Hey everyone, I recently created a web application using the Vue framework. To prepare for deployment, I followed the instruction to get a dist file by running: npm run build Once I obtained the dist file, I uploaded the entire application folder to File ...

Tips for refreshing retrieved data from the server upon page creation in Vue.JS

Upon page load, data is retrieved from the server and displayed in a table format like the one shown below: <tr v-for="option in options"> <td> < ...

Pause page scrolling temporarily in JavaScript while allowing the scrollbar to continue scrolling until the pause is lifted

I'm currently working on achieving a similar effect to the one found on this website: . On that site, as you scroll down, the 'HELLO' text moves to the side. I've managed to do that part successfully, but I'm facing an obstacle reg ...

vue popup input will automatically receive focus

Currently, I am utilizing Vue 2.x Within a HTML file that is included in a JSP file, the structure looks like this: <html> <body> <div id="myDiv"> <input type="text" v-model="input" @click=&qu ...

Discovering the type in Typescript by specifying a function parameter to an Interface

Consider this sample interface: interface MyInterface { x: AnotherThing; y: AnotherThingElse; } Suppose we make the following call: const obj: MyInterface = { x: {...}, y: {...}, } const fetchValue = (property: keyof MyInterface) => { ...

Having trouble executing 'vue ui' in npm with nodejs vue/cli

Trying to set up Vue tool chain on a fresh Win10pro system has been quite challenging, as I kept encountering various errors that seem to stem from the same source. Upon running vue ui, the following error message pops up: @vue/cli 4.5.15 PS C:\U ...

What steps can I take to use CSS to disable a webpage?

Is there a way to create a disabled web page using CSS where users cannot click on any content and only view the content below the screen? ...

Clicking to center div elements

When clicking on my div elements, they transform into flipcards and expand to a size of 600px by 600px. I want these divs to be centered in the middle of the screen when clicked, and then move back to their original position when clicked again. I've b ...

Vuejs Emailjs Vee-validate TypeError: Unable to access property 'target' as it is undefined

I've encountered an issue with validating and sending my data using emailjs and vee-validate. It seems to work fine without vee-validate. Can anyone assist me with this problem? Thank you. Software Versions: vee-validate: 3.4.5 vue: 2.6.6 emailjs: & ...

transferring data from one HTML file to another using a loop with technologies such as HTML,

As a beginner in front end development, I am finding it a bit challenging at the moment. Here's what I have so far: 1 main HTML file (index.html) 1 JavaScript file (something.js) 2nd HTML file (something.html) Main HTML: <!DOCTYPE html> < ...

Issues with the Diagonal HTML Map functionality

I'm seeking assistance to implement a unique Google Maps Map on my webpage. I have a particular vision in mind - a diagonal map (as pictured below). My initial approach was to create a div, skew it with CSS, place the map inside, and then skew the ma ...

Changing pricing on pricing table with a click

Looking to implement a price changing button that functions similar to the one found at this LINK: If anyone knows of any JavaScript or other solution, please provide me with some guidance. Thank you in advance. ...

Struggling to close the dropdown with jquery

Check out this code snippet: https://jsfiddle.net/rajat_bansal/rtapaew5/1/ The jQuery section below is causing some trouble: $(document).ready(function(e) { $(".sub-handle").click(function() { if(!$(this).hasClass('showing-sub&ap ...

Issue encountered during production mode compilation: "Vue Laravel Mix" is not a valid function

I'm working on a Laravel, VueJs, VueRouter, Vuex application that utilizes Webpack for compiling assets. Here's my package.json file: { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env ...

Using Twitter Bootstrap to set a minimum number of lines for thumbnail captions

I currently have a carousel on my website created using Bootstrap that displays 4 columns of thumbnails. You can view the carousel here. When navigating to the third page of the carousel, you will notice that the container increases in height to accommodat ...

Adjusting the view to focus solely on the visible portion of the webpage

Is there a way to achieve zooming in and out on a website similar to how it works on the site ? I want only the visible area to zoom in or out when users interact with their browser. I searched online for a solution but couldn't find one. Any suggesti ...

HTML/CSS Inactive: Troubleshooting and Solutions

There seems to be an issue with the :active state, if anyone can spot the problem and provide assistance, it would be greatly appreciated. Here is the HTML code: http://pastebin.com/4wCi3L2Z And here is the CSS code: http://pastebin.com/jZvgdDaA Thank y ...

Obtain a socket object from the Vuex store

I'm currently using vue socket io to receive data from a socket. To get the data, I utilize a query like this: // ioinstance import io from 'socket.io-client' const restaurantId = localStorage.getItem('restaurant-id') const socket ...

Will the bootstrap carousel continue running in the background even if I hide it?

Currently, I have incorporated the twitter bootstrap carousel into my website with the following code: <div id="slider" class="carousel slide"> <!-- Wrapper for slides --> <div class="caro ...