VueJS 2：在鼠标悬停时将 v-for 索引绑定到 id 属性

Question

我在 li 元素上使用 v-for 指令从数组中生成一组图像。将鼠标悬停在图像上时，我想将鼠标悬停的特定图像的 id 属性更改为 'drag'，并且我希望该图像是唯一具有 [=14] 的元素=] 'drag'.

我试过像绑定 :class 一样使用内联语句绑定到 :id，但它不起作用，只是用 [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>

Answer 1

Vue 不支持使用内联 object 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">

VueJS 2：在鼠标悬停时将 v-for 索引绑定到 id 属性

VueJS 2: Bind v-for index to id attribute on mouseover

javascript

mouseover

vue.js

vuejs2