标记Vue Todo列表项
标记Vue Todo列表项
提问于 2018-07-24 22:37:15
这一点以前可能已经回答过，但我一直无法找到在这种具体情况下有效的答案。
我是Vue的新手，我尝试构建一个Todo列表，在这个列表中，我可以在列表项完成时单击它，更改或添加一个将改变项目样式的类。
我想我并不完全理解主Vue和组件之间的作用域是如何一起工作的。我现在的代码什么也没做。我尝试过在主组件和组件之间移动方法，但是它总是给我带来一些错误。
我想我只是在寻求一些关于该如何做的指导。
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.id + 1 }}. {{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
isDone: false,
todos: [
{ id: 0, text: 'This is an item to do today' },
{ id: 1, text: 'This is an item to do today' },
{ id: 2, text: 'This is an item to do today' },
{ id: 3, text: 'This is an item to do today' },
{ id: 4, text: 'This is an item to do today' },
{ id: 5, text: 'This is an item to do today' }
]
},
methods: {
markDone: function(todo) {
console.log(todo)
this.isDone = true
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div class="content">
<ul class="flex">
<todo-item
v-for="todo in todos"
:todo="todo"
:key="todo.id"
@click="markDone"
:class="{'done': isDone}"
></todo-item>
</ul>
</div>
</div>
谢谢你的帮助伙计们。
Stack Overflow用户
发布于 2018-07-25 00:13:51
在您的代码中，处理单击事件的是<li>元素，但是您试图在组件的根目录中处理它，有几种方法可以解决这个问题
使用本机修饰符
<todo-item
v-for="todo in todos"
:todo="todo"
:key="todo.id"
@click.native="markDone"
:class="{'done': isDone}"
>
</todo-item>您可以在这里找到更多信息，https://v2.vuejs.org/v2/guide/migration.html#Listening-for-Native-Events-on-Components-with-v-on-changed。
从组件发出单击事件
Vue.component('todo-item', {
props: ['todo'],
template: '<li @click="click()">{{ todo.id + 1 }}. {{ todo.text }}</li>',
methods: {
click () {
this.$emit('click')
}
}
})顺便说一句，在您当前的代码中，一旦您单击一个todo，所有todo都将被“标记为已完成”，因为您只对它们使用了一个变量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51508485
复制相关文章
相似问题
腾讯云开发者
