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

Question

我正在使用 v-for 指令来渲染列表。

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

  Content

   </li>

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

Answer 1

您可以通过访问 event.currentTarget (甚至 event.target 在这种情况下可以工作)，其中 event 是回调的参数。

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>