javascript - VueJS 2:鼠标悬停时将v-for索引绑定(bind)到id属性

我在v-for元素上使用li指令从数组生成一组图像。在将鼠标移到图像上时，我希望将鼠标移到的特定图像的id属性更改为'drag'，并且希望此图像是具有id的'drag'的唯一元素。
我尝试过使用内联语句绑定到:id，就像您对:class所做的那样，但它不起作用，只是用[object Object]替换id。
这里我已经绑定到:class并且它的行为正确：

var app = new Vue({
  el: '#app',
  data: {
    list: [{
      Name:'Object 1', link:'obj1.jpg'
    }, {
      Name:'Object 2', link:'obj2.jpg'
    }, {
      Name:'Object 3', link:'obj3.jpg'
    }],
    dragIndex: "",
  },
  methods: {
    drag(item,index) {
      console.log("Dragging " + item)
    },
    startDragID(index) {
      this.dragIndex = index
      console.log("Element Prepped For Drag: " + index)
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ul>
    <li
      v-for="(items,index) in list"
      draggable="true"
      @mouseenter="startDragID(index)"
      @dragstart="drag(items.link,index)"
      :class="{'drag' : dragIndex == index , 'not-drag' : dragIndex != index}"
    >{{items.Name}}</li>
  </ul>
</div>

最佳答案

vue不支持使用inlineobject syntax绑定到id属性，就像它不支持class和style属性一样。
您可以创建一个方法，根据给定的index，计算适当的id值：

methods: {
  getID(index) {
    return (index == this.dragIndex) ? 'drag' : false;
  }
}

并将结果绑定到id属性：

<li v-for="(items, index) in list" :id="getID(index)">

或者，由于确定id的方法非常简单，您可以添加内联逻辑：

<li v-for="(items, index) in list" :id="(index == dragIndex) ? 'drag' : false">