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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With