Tips on attaching a class to elements in a loop when a click event occurs

Question

Tips on attaching a class to elements in a loop when a click event occurs

In my HTML, I am displaying information boxes from an array of objects that are selectable. To achieve this, I bind a class on the click event. However, since I am retrieving the elements through a v-for loop, when I select one box, the class gets bound to all of them.

Is there a way to differentiate only the selected box?

I have come across examples using jQuery, but I am interested in exploring other methods.

Here is my template:

<div class="list-services">
  <div class='column-service' 
    v-for='estimation in filteredEstimation' 
    v-bind:key="estimation.name" 
    :class="{ focusService }" 
    @click="focusService = !focusService"
  >
    <div class="service-name">
      {{estimation.name}}
    </div>
    <div class="service-description">
      {{estimation.description}}
    </div>
    <div class="service-price">
      {{estimation.price}} 
      <span class="price-currency">€</span>
    </div>
  </div>
</div>

Thank you for your time and assistance!

javascript css class vue.js

Answer 1

Answer №1

While attempting to create a jsfiddle to address your query, I stumbled upon a jsfiddle in the vue.js forum that might be useful: https://jsfiddle.net/mogtfpze/2/

This particular jsfiddle presents three distinctive options for highlighting content through clicks.

li v-for="item in items" 
  :class="{highlight:item.id == selected}" 
  @click="selected = item.id">
  {{item.id}}
</li>

Even though it's an older solution, I believe it should still function with the current Vue version.

If it doesn't work or if there are any uncertainties, feel free to reach out and I'll do my best to assist!

Answer 2

While attempting to create a jsfiddle to address your query, I stumbled upon a jsfiddle in the vue.js forum that might be useful: https://jsfiddle.net/mogtfpze/2/

This particular jsfiddle presents three distinctive options for highlighting content through clicks.

li v-for="item in items" 
  :class="{highlight:item.id == selected}" 
  @click="selected = item.id">
  {{item.id}}
</li>

Even though it's an older solution, I believe it should still function with the current Vue version.

If it doesn't work or if there are any uncertainties, feel free to reach out and I'll do my best to assist!

Answer 3

Answer №2

One technique that I personally employ (assuming I've grasped your question accurately) involves utilizing the this keyword.

For instance:

index.html

<ul id="myList">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

script.js (Vanilla JavaScript)

var myList = document.getElementById("myList");
    myList.addEventListener("click", function () {
    console.log(this);
    console.log(this.innerText);
});

script.js (jQuery)

var myList = $("#myList").on("click", function() {
    console.log(this);
    console.log(this.innerText);
});

By using the this keyword in this manner, we can access the innerText of the clicked li element by simply attaching the event listener to the parent element. This is just one way to leverage the power of the this keyword - there are many other possibilities to explore by logging this in your event listener function.

Please let me know if this explanation proves helpful!

Answer 4

One technique that I personally employ (assuming I've grasped your question accurately) involves utilizing the this keyword.

For instance:

index.html

<ul id="myList">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

script.js (Vanilla JavaScript)

var myList = document.getElementById("myList");
    myList.addEventListener("click", function () {
    console.log(this);
    console.log(this.innerText);
});

script.js (jQuery)

var myList = $("#myList").on("click", function() {
    console.log(this);
    console.log(this.innerText);
});

By using the this keyword in this manner, we can access the innerText of the clicked li element by simply attaching the event listener to the parent element. This is just one way to leverage the power of the this keyword - there are many other possibilities to explore by logging this in your event listener function.

Please let me know if this explanation proves helpful!

Tips on attaching a class to elements in a loop when a click event occurs

Answer №1

Answer №2

Similar questions

Why does the styling of the inner Span adhere to the style of the outer Span?

Difficulty displaying Vue components

Leveraging Parameters in Ajax with jQuery and JavaScript

Having difficulty converting a local variable into a global variable in JavaScript and Express

Showing identification on the drop-down list

Node accurately handles and displays errors, such as validation errors, in a precise manner

Creating a peaceful web platform with React that supports several user roles

What is the best way to make a select tag read-only before the Ajax request is successful

Adding an Icon to a Tab in Ant Design - A Step-by-Step Guide

Customize the bootstrap carousel to show multiple slides at the same time

AngularJS - Creating a dynamic wizard experience using UI-Router

Close the overlay by clicking outside of it

Is there a different method similar to Textfield onChange that works like the HTML onChange attribute?

The Mui Switch track color fails to change when checked

Update an API call to switch from promises to observables, implementing axios

I'm having trouble modifying the backdrop to 'true' or removing it after setting it to 'static' in Bootstrap. Can anyone help me troubleshoot this issue?

Showing information retrieved from an API and rendering it on an HTML page

Center the panel on the page and decrease its width using Bootstrap

Monitoring changes within the browser width with Angular 2 to automatically refresh the model

Unexpected error when using Slack SDK's `client.conversations.open()` function: "User Not Found"