How to apply class binding within a v-for loop in Vue.js

When using Vuejs3, I am currently iterating through an array of objects:

<div 
   v-for="ligne in lignes" 
   :key="ligne.id" 
   :class="{ 'border-b-2':isSelected }" 
   :id="`ligne_${ligne.id}`"
 >
     <span @click="select(ligne.id)">X</span>
</div>

I am trying to apply the class 'border-b-2' only on the selected line, but I am facing difficulties in doing it dynamically. Setting isSelected to true in the vue devtools is applying this style to all lines instead of just the selected one.

As a temporary solution, I have wrapped this code inside a function (select(id)) and changed the html class accordingly.

document.getElementById(`ligne_${id}`).classList.add('border-b-2')

This approach seems overly verbose. Is there a way to accomplish this by utilizing the :key or the v-for loop more effectively?

javascriptvue.jsvuejs3v-for

Answer №1

Make sure to define the identifier as isSelected instead of using a boolean:

const app = Vue.createApp({
  data() {
    return {
      lignes: [{id: 1}, {id: 2}, {id: 3}],
      isSelected: [],
    }
  },
  methods: {
    select(id) {
      if(this.isSelected.includes(id)) {
        this.isSelected = this.isSelected.filter(s => s !== id )
      } else this.isSelected.push(id)
    }
  }
})
app.mount('#demo')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="ligne in lignes" :key="ligne.id" 
    :class="isSelected.includes(ligne.id) && 'border-b-2'"
  >
    <span @click="select(ligne.id)">X</span>
  </div>
</div>

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 columns within the 'segment' element in Semantic-ui to enhance layout design

I am looking to divide the ui-segment into 3 columns and display the ui-statistics evenly. Below is the code I have used in an attempt to achieve this: <div class="ui container"> <div class="ui segment"> <h3 class="ui header"> ...

javascriptjqueryhtmlgridsemantic-ui

Navigation bar transforms color once a specific scroll position is reached

My website features a sleek navbar fixed to the top of the window. As users scroll past a specific div, the background color of the navbar changes seamlessly. This functionality has been working flawlessly for me thus far. However, upon adding anchor link ...

javascriptjqueryhtmlcss

Building a custom DSL expression parser and rule engine

In the process of developing an app, I have included a unique feature that involves embedding expressions/rules within a configuration yaml file. For instance, users will be able to reference a variable defined in the yaml file using ${variables.name == &a ...

javascriptjavapythondslrule-engine

When using a master page in ASP.Net webforms, the autocomplete feature may not function correctly

I'm encountering an issue with a script on my website. I have a web form called CoursesPage.aspx that utilizes a master page. I have implemented autocomplete functionality using jQuery on a textbox to display course names fetched from a database. The ...

c#javascriptjqueryasp.netmaster-pages

Converting image bytes to base64 in React Native: A step-by-step guide

When requesting the product image from the backend, I want to show it to the user. The issue is: the API response contains a PNG image if the product has an image, but returns a (204 NO Content) if the product does not have an image. So, I need to display ...

javascriptreactjstypescriptreact-nativeexpo

The issue of VueRouter malfunctioning in history mode within Wordpress

I have integrated Vue into my Wordpress theme, but I am facing an issue with the router when setting mode: 'history'. The site goes blank and even after trying to configure the .htaccess file, nothing seems to work. My project is located in the V ...

javascriptwordpress.htaccessvue.jsvue-router

Set the minimum height of a section in jQuery to be equal to the height of

My goal is to dynamically set the minimum height of each section to match the height of the window. Here is my current implementation... HTML <section id="hero"> </section> <section id="services"> </section> <section id="wo ...

javascriptjqueryhtmlcss

Trouble accessing properties in Mongoose objects?

I am facing a puzzling issue while attempting to retrieve properties from a MongoDB (mongoose) find query. When I log the entire object, everything is visible. However, when I attempt to access a specific property, it returns undefined. The object is cert ...

javascriptnode.jsmongodbmongooseecmascript-6

The SSE functionality is effective in a local environment, but encounters issues when deployed on Vercel's

Operating a proxy server, I send a request to OpenAI which responds with a Readable Stream object. The proxy server then redirects these events back to the client. While my code functions properly on a local deployment, it encounters issues when deployed ...

javascriptexpressstreamvercelserver-sent-events

Webpack Error: SyntaxError - an unexpected token found =>

After transferring my project to a new machine, I encountered an error when running webpack --watch: C:\Users\joe_coolish\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:186 outputOption ...

javascriptnpmwebpack

A guide on customizing ng-map markers by assigning colors to different categories

One of the functionalities I have allows users to see nearby locations based on their position and selected radius. These locations fall into different categories, and now I want to customize the markers' colors based on those categories. Here is a s ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3

What is the method for retrieving array values from an attribute?

I am currently developing an Angular 6 application and I need to pass and retrieve array values dynamically through attributes. Here is the code snippet I have used for this purpose: HTML: <ul class="list-unstyled" id="list" [attr.parent_id]="123"> ...

javascriptarraysangulartypescriptattributes

Unexpected behavior encountered in Rails app with unobtrusive JavaScript

I'm facing an issue with my link_to setup. Here's what I have: <%= link_to "Load More", comments_feed_path(@post.id), :id => 'my-link', :remote => true %> In my application.js file, I have the following code: $( document ...

javascriptruby-on-rails

How to make Vuetify grid columns wrap and fill the full height

I am facing an issue where the component created using v-card in a grid system does not fill the full height. I tried using d-flex but it did not work as expected. The middle column with a white v-card should occupy the entire column height but it is gett ...

cssvue.jsvuetify.js

Using ThreeJs and TweenJS to insert a delay between tweens using a for loop

Struggling with animating a bin packing problem using Three.JS and Tween.JS. I am having difficulty getting the animation to play successively rather than all at once within my loop. Attempting to use the setTimeout solution has not been successful. Does a ...

javascriptthree.jstweenjs

Explore the capabilities of Vue.js by creating multiple JavaScript classes within your application

<div class="container" :class="{ qwerty: !open }" :class="lower? 'left' : 'right'"> Hey there, I've noticed that Vue seems to only allow me to add one class with conditions, as shown in the exam ...

javascriptvue.js

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...

javascriptjqueryhtmlcss

The website code lacks a dynamically generated <div> element

When using jQuery to dynamically add content to a "div" element, the content is visible in the DOM but not in the view page source. For example: <div id="pdf"></div> $("#btn").click(function(){ $("#pdf").html("ffff"); }); How can I ensur ...

javascriptjqueryhtml

Increase the Step Size of an HTML Number Input by Holding Down the Time

Is there a way to implement increasing increment/step size for number inputs in HTML based on how long the user holds the stepper arrows? For instance, starting at step size=1 and gradually ramping up to larger increments like 5, 10, 20, etc. after holdin ...

javascripthtml

Initiating an audio call exclusively via SimpleWebRTC

I'm currently utilizing a jQuery plugin for WebRTC found here. My goal is to initiate an audio call only, but I am struggling to find a function within the plugin that allows for this. The code snippet I am using with autoRequestMedia set to false is ...

javascriptjqueryhtmlwebrtchtml5-audio