Tengo un escenario en el que, en cierto punto, se actualizará la lista desplegable de valores. Supongamos que tenemos una lista de frutas en el menú desplegable. al presionar una tecla, actualizaré la lista de frutas con la lista de flores, esto es solo un ejemplo. ¿Cómo puedo actualizar la lista en vivo? Leí la reactividad en profundidad aquí, pero no obtuve mucha ayuda. Esta pregunta es parte de esta pregunta aquí .
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>Se agregó un fragmento simple para mostrar cómo se puede usar la reactividad para mostrar la lista según alguna opción.