VueJS 2：綁定v型爲索引id屬性的鼠標懸停

我使用li元件上的v-for指令以產生從陣列的一組圖像。在鼠標懸停的形象，我想改變我的鼠標滑過是'drag'的特定圖像的id屬性，我想這個圖像是有'drag'的id的唯一元素。VueJS 2：綁定v型爲索引id屬性的鼠標懸停

我試過用: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>

來源

2017-05-05 Stevechap416

請出示你的代碼。 – thanksd

添加代碼來顯示的例子。 – Stevechap416

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">

來源

2017-05-05 16:33:17 thanksd

VueJS 2：綁定v型爲索引id屬性的鼠標懸停

回答

相關問題