Por favor, ¿alguien puede enseñarme el método para intercambiar dos datos diferentes al hacer clic?
Por ejemplo, tenemos un dato
data() { return { data_one: [ { name: "Simo", age: "32" } ], data_two: [ { name: "Lisa", age: "25" } ], } }, luego quiero poner estos datos en v-for , y quiero agregar dos botones para intercambiar entre data_one y data_two y mostrar data_one como predeterminado.
<button @click="change_to_data_one">Data 1<button> <button @click="change_to_data_two">Data 2<button> <li v-for="item in data_one">{{item.name}} - {{item.age}}<li>🙏🙏🙏🙏🙏
Intenta usar la propiedad calculada:
new Vue({ el: "#demo", data() { return { data_one: [{name: "Simo", age: "32"}], data_two: [{name: "Lisa", age: "25"}], selected: "data_one" } }, computed: { showData(){ return this[this.selected] } }, methods: { swap(val) { this.selected = val } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <button @click="swap('data_one')">Data 1</button> <button @click="swap('data_two')">Data 2</button> <ul> <li v-for="(item, i) in showData" :key="i">{{item.name}} - {{item.age}}</li> </ul> </div>