Vue搜索过滤器复选框问题

Question

I have problem with checkboxes and vue filter of array.

 new Vue({ el: "#app", data: { todos: [ { text: "Learn JavaScript"}, { text: "Learn Vue"}, { text: "Play around in JSFiddle"}, { text: "Build something awesome"} ], search: '', }, methods: { }, computed: { filtered() { return this.todos.filter(todo => { return todo.text.toLowerCase().includes(this.search.toLowerCase()) }) }, } }) 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } li { margin: 8px 0; } h2 { font-weight: bold; margin-bottom: 15px; } del { color: rgba(0, 0, 0, 0.3); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="text" v-model="search"> <ol> <li v-for="todo in filtered"> <label> <input type="checkbox"> <del v-if="todo.done"> {{ todo.text }} </del> <span v-else> {{ todo.text }} </span> </label> </li> </ol> </div> 

If you check first from array and search for any of others:

Check -> Learn javascript

Search -> Learn Vue

Vue appear to be checked..

Is that suppose to work like that?

How can I remove all from displayed list and append same time?

Answer 1

Use v-model to bind in filtered array

 new Vue({ el: "#app", data: { todos: [ { text: "Learn JavaScript"}, { text: "Learn Vue"}, { text: "Play around in JSFiddle",done:true}, { text: "Build something awesome"} ], search: '', }, methods: { }, computed: { filtered() { return this.todos.filter(todo => { return todo.text.toLowerCase().includes(this.search.toLowerCase()) }) }, } }) 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } li { margin: 8px 0; } h2 { font-weight: bold; margin-bottom: 15px; } del { color: rgba(0, 0, 0, 0.3); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="text" v-model="search"> <ol> <li v-for="todo in filtered"> <label> <input v-model="todo.done" type="checkbox"> <del v-if="todo.done">{{ todo.text }}</del> <span v-if="!todo.done">{{ todo.text }}</span> </label> </li> </ol> </div> 

Here is put checked by default for Play around in JSFiddle

Answer 2

Simply just add done: false in todos and add v-model="todo.done" to input in v-for .

Example on JSFiddle

Differences from your code:

// added `done`
todos: [
  { done: false, text: "Learn JavaScript"},
  { done: false, text: "Learn Vue"},
  { done: false, text: "Play around in JSFiddle"},
  { done: false, text: "Build something awesome"}
]

<!-- added `v-model="todo.done"` -->
<input v-model="todo.done" type="checkbox">