[Vuejs]-How can I get value in select vue.js? vue.js 2

0👍

I hope I got you right. You want to propagate the value of the select back to the parent. The Child component COULD be like this.

  • removed template nesting
  • added change event listener and emit method
  • added data

And all together:

<template>
    <select @change="emitChange" class="form-control" v-model="selected" :name="elementName">

        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>

    </select>
</template>
<script>
    export default{
        props: ['elementName', 'level','type','module'],
        data: function() {
            return { selected: null } 
        },
        methods: {
            emitChange: function() {
                this.$emit('changeval', this.selected);
            }
        }
    };
</script>

Now your parent needs to listen to this emit. Here just the relevant parts of your parent

...

<location-bs-select element-name="city_id" 
                    level="cityList" 
                    type="2" 
                    @changeval="changeval"
                    module="searchByLocation"/>


 ...

methods: {
   changeval: function(sValue) {

      this.province_id = sValue;
      console.log(this.province_id);

   }
}

Quickly summed up

  • the select value is bound to the selected prop of your data
  • the select has an attached change event which will emit changes
  • the parent will listen to this emit and will update it’s relevant data prop

Leave a comment