How to toggle classes on specific items generated with Vue JS's v-for directive

Question

How to toggle classes on specific items generated with Vue JS's v-for directive

I have a list rendering using the v-for directive in Vue.js.

<li v-for="group in groupList" :key="group.id" @dragenter="toggleClass ...."@dragleave="toggleClass ...." >

      Content

       </li>

My goal is to apply a class to the li element when the dragenter event occurs. How can I achieve this? How do I access the element itself (not just its data) inside the event handler, and how can I toggle the class based on that reference?

While I understand that Vue promotes data-driven changes to reflect on the DOM, I am looking for a more concise solution that doesn't rely on indexes or IDs within the data model. Thank you.

javascript vue.js drag-and-drop v-for

Answer 1

Answer №1

To access the li element that is being dragged in the dragenter callback, you can use event.currentTarget (or event.target would also work in this scenario). Here, event refers to the parameter of the callback function.

new Vue({
  el: '#app',
  data() {
    return {
      grouplist: [
        { id: 1, text: 'a' },
        { id: 2, text: 'b' },
        { id: 3, text: 'c' },
      ]
    }
  },
  methods: {
    onDragEnter(e) {
      e.currentTarget.classList.add('drag-enter');
    },
    onDragLeave(e) {
      e.currentTarget.classList.remove('drag-enter');
    }
  }
})

.drag-enter {
  background: #eee;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4630332306746873687770">[email protected]</a>"></script>

<div id="app">
  <p draggable>Drag this text over the list items below</p>
  <ul>
    <li v-for="group in grouplist"
        :key="group.id"
        @dragenter="onDragEnter"
        @dragleave="onDragLeave">{{group.text}}</li>
  </ul>
</div>

Answer 2

To access the li element that is being dragged in the dragenter callback, you can use event.currentTarget (or event.target would also work in this scenario). Here, event refers to the parameter of the callback function.

new Vue({
  el: '#app',
  data() {
    return {
      grouplist: [
        { id: 1, text: 'a' },
        { id: 2, text: 'b' },
        { id: 3, text: 'c' },
      ]
    }
  },
  methods: {
    onDragEnter(e) {
      e.currentTarget.classList.add('drag-enter');
    },
    onDragLeave(e) {
      e.currentTarget.classList.remove('drag-enter');
    }
  }
})

.drag-enter {
  background: #eee;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4630332306746873687770">[email protected]</a>"></script>

<div id="app">
  <p draggable>Drag this text over the list items below</p>
  <ul>
    <li v-for="group in grouplist"
        :key="group.id"
        @dragenter="onDragEnter"
        @dragleave="onDragLeave">{{group.text}}</li>
  </ul>
</div>

How to toggle classes on specific items generated with Vue JS's v-for directive

Answer №1

Similar questions

The attempt to execute 'removeChild' on 'Node' was unsuccessful because parameter 1 is not the correct type. Although it did remove the elements from the DOM, it only did so once

Merging the `on('click')` event with `$(this)`

What is the best way to access the current value and name of a textbox in real-time using

Can you explain how the Facebook Like button code functions and how I can create a similar feature on my own platform?

Can you explain the distinction between 'ssr:false' and 'target:static' in NuxtJS?

Utilizing JQuery for parsing information

Vue's push() method is replacing existing data in the array

Develop a series of sequential tests for the playwright to execute

Error: Unable to access 'push' property of null object in Next.js Link

Experiencing the "Module not found" issue while incorporating SCSS into React applications

Creating form elements in ReactJS dynamically and storing their values in an array

What is the best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

How to properly import components and CSS in Vue.js for optimized performance

Component does not detect change when the same number is sent as input

The Vuetify tooltip appears to be invisible in the HTML document

gmap3 has encountered an error: undefined is not a valid function

Dealing with Vue's performance problems when using input type color and v-model

Instructions for inserting an anchor tag into the middle of a <p> element utilizing document.createElement("p")

Glitchy/Crazy CSS3 Animations

Sharing data between two components on the same level in Vue.js