How to add dynamic ref to vue?

Question

I have some dynamic elements <input>in my dom view from a for loop in vue. I need to add a property refto each of them, adding an Id for each ref, e.g. element1, element2, .. etc. How to do it in vue?

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

How to add refif result.idexists

Answer 1

Just use v-bind , for example :ref="'element' + result.id".

Check out the 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>

Run codeHide result

Edited: Thanks to editing Vamsi I replaced indexwithresult.id