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

Having trouble grasping the error message "Uncaught Typerror Cannot Read Property of 0 Undefinded"?

Loading 3D models in Three.js from the cache

Having trouble generating a Vue project using vue/cli?

"Encountering a halt in my Node.js Application as it waits endlessly

How can I implement a page switch in vuejs by clicking on a name in a table list?

Issue with Vuex: Error encountered while sorting the local Array

What is the process of setting up a subelement in a Vue array?

Record the marker's location only once following the completion of its dragging action

What is the best way to create a test for my Vue component using Jest?

Error: It is not possible to define the 'words' property of an undefined value

What are the reasons behind the unexpected behavior of the replace() method in the newest Safari update?

NextJS is like the master of ceremonies in the world of backend

Create a Bootstrap Modal that is positioned relative to a specific column

Is it permissible to enclose useEffect hooks within an IIFE?

Looking for assistance with changing the class of a span when a radio button is selected

Tips for utilizing the GROUP BY Clause in Sequelize along with associations

Synchronize custom directive controller data with data from a factory

How can we apply a hover effect to combine two rows in a table as one using CSS?

Incorporating jQuery to Load Content into a DIV while preserving the original JavaScript

Concealing empty rows within a vertical v-data-table using Vue