i have a scenario where on certain point the dropdown list of values are to be updated.like suppose we have a list of fruits in dropdown. on key-press i will update the the list of fruits with list of flowers this is just example. how can i update the list live? i read the reactivity in depth here but i didnt get much help from it.. this question is the part of this question here
new Vue({
el: "#app",
data: () => ({
type: 'fruits',
fruits: ['apple', 'banana', 'cherry'],
animals: ['cat', 'dog', 'rabbit'],
}),
computed: {
list() {
return {
fruits: this.fruits,
animals: this.animals
}[this.type]
}
},
methods: {
change(type){
this.type = type
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click.prevent="change('animals')">
Animals
</button>
<button @click.prevent="change('fruits')">
Fruits
</button>
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>Added a simple snippet to show how can be reactivity used to display list based on some option.