Question

我在v-for元素上使用li指令从数组中生成一组图像。在鼠标悬停在图像上时，我想将我所关注的特定图像的id属性更改为'drag'，我希望此图像是唯一具有{{1}的元素} id。

我尝试使用类似于'drag'的内联语句绑定:id，但它不起作用，只是用:class替换id。

我已经绑定到[object Object]并且行为正确：

＆＃13;

:class

＆＃13;

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

＆＃13;

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 index绑定到id属性

1 个答案: