Fetch the value of element dynamically in Vuejs

Question

I'm not sure if this is the question directly relate to Vue or JavaScript, but as it involves 'refs' from VueJs, i have posted question here.

I've multiple input text elements in my DOM. They are named as txtScore1, txtScore2, txtScore3 etc. On my click button event I want to fetch the value from say txtScore1. But how can I pass this refernce dynamically in this.$refs.{{ #some way of referring txtScore1 dynamically# }}.value?

I'm creating input element as follows: <input v-bind:ref="'txtScore' + props.item.Id" type="text"/>

can you please help?

Thanks, Mihir

• Sergiu Paraschiv: this.$refs['txtScore' + someVariableContainingNumber1].value
• Sergiu Paraschiv: Possible duplicate of Dynamically access object property using variable

Answer 1

If you are stating to props data, then the following is a wrong way:

<input v-bind:ref="'txtScore' + props.item.Id" type="text"/>

You should just use item.Id.

To your question,

You need to pass the item object in your input handler:

<input v-bind:ref="'txtScore' + item.Id" type="text" @input="handler(item)" />

In your method:

methods: { // or, whatever you need
 handler(item) {
 //use ref value like this:
 //this.$refs['txtScore' + item.id].value
 }
}

---

But, this is really unnecessary, you can simply use the $event object instead of using $refs:

<input type="text" @input="handler($event)" />

And then, just use the following:

handler(event) {
 console.log(event.target.value);
}

---

And even more, why don't you simply use v-model?

<input type="text" v-model="item" />

Answer 2

You can use string concatenation and the object property accessors/bracket notation as follows:

new Vue({
 el: '#app',
 data: {
 props: {item: {Id: 11, value: "Click me"}}
 },
 mounted: function() {
 var someVar = 11;
 console.log("11:", this.$refs['txtScore' + someVar].value);
 },
 methods: {
 goClick(Id) {
 console.log('You have clicked '+ Id + ', with value: "' + this.$refs['txtScore' + Id].value + '"');
 }
 }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
 <input v-bind:ref="'txtScore' + props.item.Id" type="text" v-model="props.item.value" @click="goClick(props.item.Id)" />
</div>

Though you probably won't need it:

new Vue({
 el: '#app',
 data: {
 props: {item: {Id: 11, value: "Click me"}}
 },
 methods: {
 goClick(item, value) {
 console.log('Clicked item '+ item.Id + ', with value: "' + value + '"');
 }
 }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
 <input type="text" v-model="props.item.value" @click="goClick(props.item, $event.target.value)" />
</div>