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

Leveraging the querySelector() method within the Vue Composition API

Experiencing difficulty with passing a jQuery array to PHP

JavaScript conflicts will arise due to the introduction of Yammer Embed on September 30th, 2014

Enhancing Redux efficiency with substantial data structures

Steps for resetting the Vue 3 scaffolding

Having trouble getting ng-click to function properly in TypeScript

Exploring the Power of Angular Toastr Callback Functions

Leveraging ThemeProvider Parameters with Global Styled-Components

External API data is shown in the browser console but appears as undefined on the page

Acquiring mapping information through JSON data retrieval

Exploring the World of Angular JS Services

Is it possible to restart an animated value in React Native?

The carousel is failing to display two items on each slide

Retrieve specific JSON information

Is there a way to utilize a parameter for the user's input instead of relying on document.getElementById when incorporating a button?

The AJAX Request has indicated that the entity provided is not in an accurate 'application/json' format. It seems to be missing or empty, leading to an error with a code of '400'

Utilizing @casl/vue in conjunction with pinia: A guide to integrating these

Display of undefined data in Ajax success response

Storing a JSON response in a variable

Setting up Zurb Foundation in a VueJS TypeScript project: Step-by-step guide