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

Utilizing the Bootstrap grid system allows for input fields to automatically expand to 100% width once they reach

I am encountering some challenges while attempting to develop a responsive form using bootstrap grids. The issue seems to arise when resizing the browser window, as the grid classes behave unexpectedly by expanding and taking up the entire page width at ce ...

The responsiveness of Slick Slider's breakpoints is malfunctioning

After implementing a slider using slick slider, I encountered an issue with the width when testing it online and in a normal HTML file. If anyone could assist me in resolving this issue, I would greatly appreciate it. Please inspect the code for both scen ...

Is it possible to create vertical-floating elements using CSS?

Can anyone help with a solution to my problem illustrated in the image? I am dealing with a DIV element of fixed height that contains a List. I need this List to display as columns, each list item having a fixed width. If there are too many elements in th ...

Is there a way to overlay a static route onto a dynamic route in Vue.js?

I have a variety of dynamic routes set up like this: path: '/group/:id', name: 'Group', I am looking to make changes to the group contents in a separate view, not in a modal, and pass some data to it. The link should look something lik ...

Modifying a single element within a class with Jquery

Is it possible to create a stack of pages on a website using JQuery? I found this image that shows what I'm trying to achieve: image. Instead of applying ID css for each page, I'd like to use JQuery. While researching similar questions, I came ac ...

a guide on creating a dynamic hierarchical menu using vue.js

######################## UPDATED ######################## As per the response from @Criss, it seems that the method didn't work because there is a discrepancy between the child item and parent item. https://i.stack.imgur.com/jzHZR.png A simple item ...

Creating uniform image heights using Flexbox

My webpage features a library of books, with each book displayed in rows within a flexbox container. Each book is represented as a separate block consisting of a heading (the book's name) and an image of the book cover directly below it. I'm curr ...

A guide on implementing a Material UI table to display one row at a time on each page

I'm currently working on incorporating a Material UI table to showcase content with just one row per page. After successfully loading the page and displaying the first row, I encountered an issue where navigating to subsequent pages does not render a ...

A step-by-step guide on customizing the background color of the selected date in the MUI DatePicker

I am looking to customize the background color of selected dates in a MUI datePicker. In the image below, you can see that I want to change the blue color to a different color. Here is my code: const customStyles = makeStyles(theme => ({ datePickerC ...

When a text is wrapped by an HTML div using absolute positioning, is there a way to prevent it from wrapping without relying on white space

I have a group of div elements positioned absolutely on the screen. If any div contains content that is too big for the screen, the browser wraps it into multiple lines to fit. However, I do not want this behavior. Instead, I want the overflowing content ...

Implementing dynamic properties binding in Vue components

Trying to dynamically bind a prop name to a vuetify component using vue 2.x and vuetify 1.5x. The v-tooltip component requires a prop for the tooltip location, such as bottom or right. Normally, you would pass the prop like this: <v-tooltip bottom>& ...

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Is there a way to ensure that all images maintain the same height and width using CSS percentages, rather than set pixel values? I'm working on displaying images in circles, where most are uniform in size but a few outliers distort the shape. The wide ...

Surprising pause in the menu transition animation

Currently, I am in the process of developing a menu that seems to have some flaws. One issue is that it appears a bit choppy, but the more concerning problem is the half-second delay after clicking an item before it animates. The concept behind this menu ...

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Seeking the most efficient method to load content from a php file into a designated div on my webpage, prioritizing speed, minimal performance requirements, and ease of implementation. Unsure whether it's preferable to utilize php or javascript for t ...

Liquid 960: Bizarre Alpha/Omega Phenomenon

Currently, I am working with Fluid 960 and encountering some unexpected behavior with alpha/omega. Typically, I utilize alpha/omega to adjust left and right margins within nested grids. Oddly enough, when I use alpha/omega on a set of nested grids, the gr ...

Tips for eliminating the entire link from the footer section

Whenever a link is hovered over, a white box displaying the full URL appears at the bottom left of the browser. Is there a way to remove this feature from my website? I appreciate any assistance with this issue. Thank you! ...

Clicking to close tabs

I am currently working on implementing a tab functionality on my website and I want these tabs to be responsive. Here is the code snippet I have been using: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.ge ...

Choosing the right CSS selectors for elements within other elements

I'm trying to add a stagger effect to the fade-in animations of images within a gallery. After looking over my code, I believe the issue lies in how I am setting the animation-delay in the CSS selector. I am not sure if SCSS is supported in this snipp ...

Generating dynamic divs in parallel

Despite encountering numerous posts related to the issue at hand, none of them have solved my specific problem. I am aiming for 3 divs to display in each row, but the current code is causing each div to show up on a new line vertically: JQuery ...

From ascending to descending: enhancing input search functionality with Vuejs

I need assistance with changing the sorting order of the result displayed in this field from descending to ascending. <!-- city --> <div class="col-md-6"> <label class="form-label fw-bold w-100">{{ $t(&ap ...