Categories
javascript vue.js

Vue search filter checkbox issue

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?