如何在vue中添加動態參考？

我有一些動態的<input>元素在我的dom中由for循環渲染。我需要爲每個元素添加ref屬性，方法是給每個元素添加一個Id，比如element1，element2，..等。如何在vue中做到這一點？如何在vue中添加動態參考？

<div v-for="(result, index) in data" :key="index"> 
    <input type="text" type="file" ref="element" /> 
</div>

如何添加ref如果result.id存在

來源

2017-08-08 LJP

只需使用v-bind像:ref="'element' + result.id"。

檢查fiddle here。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    data: [{id: 1}, {id: 2}, {id: 3}], 
 
    }, 
 
    mounted() { 
 
    console.log(this.$refs); 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 

 
<div id="app"> 
 
<div v-for="(result, index) in data" :key="index"> 
 
    <input type="text" type="file" :ref="'element' + result.id" /> 
 
</div> 
 
</div>

編輯：感謝Vamsi的編輯，我換成index與result.id

來源

2017-08-08 08:44:35 choasia

哎呀我來晚了...... + 1個 –

@VamsiKrishna非常感謝您的編輯。我再次更改了一些代碼以使其工作。 – choasia

如何在vue中添加動態參考？

回答

相關問題