vue.js problem with getting value of selected option and passing it to another child component

Question

I'm new with vue.js, and trying to find the best way to get a value from <option> of <select> element, and store it to data() property, so it can be passed to another component.

That <select> section looks like this:

<select ref="select">
  
<!-- key "item" == js object in array, fetched from API -->

  <option 
   v-for="(item, index) in arr"
  v-bind:key="index" 
  :value="item">{{item.val}}</option>
</select>

So, what's the best way to get item.val and put it into data() ?

Thanks in advance.

Rajdeep D · Accepted Answer · 2020-08-05 18:49:56Z

1

new Vue({
  template:'
  <select v-model="selectedOption" @change="handleChange">
          <option value="" disabled>--Select--</option>
          <option v-for="item in data" :value="item.val">{{item.text}}</option>
        </select>
',
data:{
   selectedOption:''
},
methods:{
handleChange:function(event){
  console.log(this.selectedOption); //you will find the value here
}
}
})

answered Aug 5, 2020 at 18:49

Rajdeep D

3,9201 gold badge12 silver badges18 bronze badges

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

Comments

Nyelthon Refatti · Accepted Answer · 2020-08-05 19:03:50Z

0

The vue template:

<select v-model="selectVal" ref="select">
  
  <option 
   v-for="(item, index) in arr"
  v-bind:key="index" 
  :value="item">{{item.val}}</option>
</select>

The js code:

data: function(){
   return {
   
      selectVal: 0,

  };
},

answered Aug 5, 2020 at 19:03

Nyelthon Refatti

213 bronze badges

Collectives™ on Stack Overflow

vue.js problem with getting value of selected option and passing it to another child component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related