My goal is to dynamically change the options in the second select list based on the value selected in the first one. I initially achieved this by creating two separate Vue instances for each select, but I wanted a more streamlined approach for a cleaner app.
The JSON array called types needs to be defined outside of the Vue JS code, as shown in the fiddle.
However, I'm struggling to figure out how to properly update the second select list.
Previously, my code looked like this and it worked smoothly:
// methods for the first select (category)
methods: {
update: function (value) {
this.options = types[value];
}
}
...
// methods for the second select (typselect)
methods: {
onChange(event) {
typselect.update(event.srcElement.value);
}
}
With this setup:
<div id="app">
<select v-model="category" v-on:change="onChange">
<option>Choose</option>
<option value="5">type1</option>
<option value="6">type2</option>
<option value="11">type3</option>
</select>
<select id="typselect">
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
</div>
I attempted a different approach which looks like this now:
new Vue({
el: '#app',
data: {
category: '5'
},
computed: {
options: function() {
console.log('should be called on change');
let options = '';
options = 1;
// options = types[event.srcElement.value]; // this would be so easy...
return options;
}
},
methods: {
onChange: function(e) {
console.log(event.srcElement.value);
this.options = this.options;
}
}
})
Unfortunately, I'm still unable to successfully update the second select list.
You can find the updated code in this fiddle: https://jsfiddle.net/Honkoman/g9g5uukr/2/