<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todosArr">
<label>
<input type="checkbox" v-on:change="toggle(todo)" v-bind:checked="todo.show">
<del v-if="todo.show">
{{ todo.text }}
</del>
<span v-else>
{{ todo.text }}
</span>
</label>
</li>
</ol>
</div>
new Vue({
el: "-sharpapp",
data: {
todos: [
{ text: "Learn JavaScript", done: false},
{ text: "Learn Vue", done: false},
{ text: "Play around in JSFiddle", done: true},
{ text: "Build something awesome", done: true}
]
},
computed: {
todosArr: function () {
var arr = [];
this.todos.forEach(function(item, index) {
if(index == 0) {
item.show = true
arr.push(item)
}else{
item.show = false
arr.push(item)
}
})
return arr
}
},
methods: {
toggle: function(todo){
todo.show = !todo.show
}
}
}) demo is here: http://jsfiddle.net/9jxyequ4/
adds the attribute show through computed, modifies show through toggle, but the v-if on the page cannot judge?