CODEWITHSUNDEEP
vue.js
Milosh
Milosh

Reputation: 49

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

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.

Upvotes: 0

Views: 22

Answers (2)

Nyelthon Refatti
Nyelthon Refatti

Reputation: 21

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,

  };
},

Upvotes: 0

Rajdeep D
Rajdeep D

Reputation: 3920

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
}
}
})

Upvotes: 1

Related Questions