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

您可以通过访问li来访问被dragenter - 回调中被拖动的event.currentTarget（在这种情况下甚至可以event.target），其中{{1}是回调的参数。

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;
}

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

1 个答案: