Este es el Jsfiddle: https://jsfiddle.net/zxo35mts/1/
Esencialmente, estoy tratando de hacer que el botón oculte todas las tareas incompletas cuando se hace clic y las muestra nuevamente cuando se hace clic nuevamente, pero no tengo idea de qué hacer.
<div id="root"> <h1> All Tasks </h1> <ul> <li v-for="task in tasks" v-text="task.description"></li> </ul> <button @click="hideIncompleteTasks">show only completed</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> new Vue({ el: "#root", data: { tasks: [ { description: "go to the store", completed: true }, { description: "finish screencast", completed: false }, { description: "make donation", completed: false }, { description: "clear inbox", completed: false }, { description: "make dinner ", completed: false }, { description: "clean room", completed: true }, ] }, methods: { hideIncompleteTasks() { if (!this.tasks.completed) { } } }, }) </script>Agregue otra propiedad llamada showCompleted que podría actualizarse con el evento de clic de botón, luego agregue otra propiedad computada llamadashowTasks shownTasks la primera propiedad:
new Vue({ el: "#root", data: { tasks: [ { description: "go to the store", completed: true }, { description: "finish screencast", completed: false }, { description: "make donation", completed: false }, { description: "clear inbox", completed: false }, { description: "make dinner ", completed: false }, { description: "clean room", completed: true }, ], showCompleted:false }, computed:{ shownTasks(){ return this.showCompleted?this.tasks.filter(task=>task.completed):this.tasks;} }, methods: { hideIncompleteTasks() { this.showCompleted=!this.showCompleted } }, }) luego renderice las shownTasks como:
<ul> <li v-for="task in shownTasks" v-text="task.description"></li> </ul> <button @click="hideIncompleteTasks">show only completed</button>De una sola mano:
new Vue({ el: "#root", data: { tasks: [ { description: "go to the store", completed: true }, { description: "finish screencast", completed: false }, { description: "make donation", completed: false }, { description: "clear inbox", completed: false }, { description: "make dinner ", completed: false }, { description: "clean room", completed: true }, ], onlyCompleted: false }, methods: { hideIncompleteTasks() { this.onlyCompleted = !this.onlyCompleted } }, }) .hiden { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"> <h1> All Tasks </h1> <ul> <li v-for="task in tasks" v-text="task.description" :class="onlyCompleted && !task.completed && 'hiden' "></li> </ul> <button @click="hideIncompleteTasks">show only completed</button> </div>