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
- [Vuejs]-VueJS 2.0 my web app doesn't show up its source in chrome View Page Source
- [Vuejs]-Add object with same key in vuejs
Source:stackexchange.com