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

this.$refs['txtScore' + someVariableContainingNumber1].value — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Mar 11, 2018 at 17:46
Possible duplicate of Dynamically access object property using variable — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Mar 11, 2018 at 17:48

Bhojendra Rauniyar · Accepted Answer · 2018-03-11 18:16:38Z

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

edited Mar 11, 2018 at 18:16

answered Mar 11, 2018 at 17:54

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

acdcjunior · Accepted Answer · 2018-03-11 18:03:56Z

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>

Collectives™ on Stack Overflow

Fetch the value of element dynamically in Vuejs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related