javascript - Vue JS 在使用 v-for 渲染的单个项目上切换类

Question

我正在使用 v-for 指令来呈现列表。

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

  Content

   </li>

我想要的是向触发事件的类添加一个li类dragenter？我怎样才能做到这一点？我什至如何在事件句柄中首先获得对项目（项目，而不是父组件的数据属性）的引用？即使我获得了引用，如何从那里切换类？谢谢。我知道 vue 是数据驱动的，更改数据以反映在 DOM 上，但我想要一个简洁的解决方案，而不是基于数据模型的解决方案的索引/ID。谢谢

Answer 1

您可以通过访问（甚至在这种情况下可以工作）来访问 -callback 中li被拖动的对象，其中是回调的参数。dragenterevent.currentTargetevent.targetevent

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/vue@2.5.16"></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>