我在Vue中试用了此待办事项应用程序,其中有一个复选框标记为已完成待办事项。如何从复选框事件获取当前实例?到目前为止,这是我所做的。
myObject = new Vue({
el: '#app',
data: {
todos: [{
id: 1,
title: 'Learn HTML',
completed: true
},
{
id: 2,
title: 'Learn CSS',
completed: false
}
]
},
methods: {
markComplete() {
debugger
this.completed = !this.completed;
}
}
})
.is-complete {
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item,key) in todos" v-bind:class="{'is-complete':item.completed}">
<input type="checkbox" v-on:change="markComplete" :checked="item.completed"> {{ item.title }}
</li>
</ul>
</div>
检查此解决方案,(我是VUEjs的新手)。
将项目传递给markComplete
功能,例如v-on:change="markComplete(item)"
,然后切换item.completed
,
markComplete(e) {
e.completed = !e.completed
}
检查代码段,希望这是您想要的
myObject = new Vue({
el: '#app',
data: {
todos: [{
id: 1,
title: 'Learn HTML',
completed: true
},
{
id: 2,
title: 'Learn CSS',
completed: false
}
]
},
methods: {
markComplete(e) {
e.completed = !e.completed
}
}
})
.is-complete {
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item,key) in todos" v-bind:class="{'is-complete':item.completed}">
<input type="checkbox" v-on:change="markComplete(item)" :checked="item.completed"> {{ item.title }}
</li>
</ul>
</div>