VueJS 2：マウスオーバー時のインデックスへのid属性のバインド

Question

li要素のv-for指示文を使用して、配列から一連のイメージを生成しています。画像の上にマウスをかざすと、特定の画像のid属性を'drag'に変更したいと考えています。idが'drag'の唯一の要素になりますようにしたいと思います。

:classのようにインラインステートメントを使用して:idにバインドしようとしましたが、機能しません。単に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

それはclassとstyleプロパティを行い、気に入りましインラインobject syntaxを使用してid財産への結合をサポートしていません。 。以来、

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

---

または：id属性にその結果を

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

とBIND：

あなたはindex与えられたに基づいて適切なid値を計算するメソッドを作成することができますIDを判断する方法は簡単ですが、論理をインラインで追加することができます：

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