我正在制作一个待办事项应用程序以更好地理解 Vue,但遇到了障碍。
我已经浏览了几个 StackOverflow 问题和 Vuejs 论坛,但我不明白我做错了什么。
问题源于 to-do-item
组件模板:
<button
@click="$emit('remove-item', {{item.id}} )">
Remove
</button>
如果我将 $emit
替换为不调用 $emit
的组件方法,它可以正常工作,但是当我使用 $emit
时(即使在本地组件函数中)它拒绝渲染。
我不知道这是为什么。这是我的其余代码:
Vue.component("todo-item", {
props:["item"],
template: `
<li>{{ item.text }}
<button
@click="$emit('remove-item', {{item.id}} )">
Remove
</button>
</li>`
})
let vm = new Vue({
el:"#app",
data: {
text: "",
todos: []
},
methods: {
getID: (function() {
let id = 0;
return function() {
return id++;
}
}()),
addTodo: function() {
this.todos.push({id: this.getID(), text: this.text});
this.text = "";
},
remove: function(remove_id) {
this.todos = this.todos.filter(({id}) => id != remove_id);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
<div id="container">
<main>
<ul>
<todo-item
v-for="todo in todos"
:item="todo"
@remove-item="remove"
>
</todo-item>
</ul>
</main>
<div id="add-field">
<input v-model="text" /> <button id="add" @click="addTodo">Add Todo</button>
</div>
</div>
</div>
最佳答案
问题是您尝试在 javascript 执行的属性中使用模板语法:
<button
@click="$emit('remove-item', {{item.id}} )">
解决这个问题,它应该可以工作:
Vue.component("todo-item", {
props:["item"],
template: `
<li>{{ item.text }}
<button
@click="$emit('remove-item', item.id )">
Remove
</button>
</li>`
})
let vm = new Vue({
el:"#app",
data: {
text: "",
todos: []
},
methods: {
getID: (function() {
let id = 0;
return function() {
return id++;
}
}()),
addTodo: function() {
this.todos.push({id: this.getID(), text: this.text});
this.text = "";
},
remove: function(remove_id) {
this.todos = this.todos.filter(({id}) => id != remove_id);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
<div id="container">
<main>
<ul>
<todo-item
v-for="todo in todos"
:item="todo"
@remove-item="remove"
>
</todo-item>
</ul>
</main>
<div id="add-field">
<input v-model="text" />
<button id="add" @click="addTodo">Add Todo</button>
</div>
</div>
希望这有帮助!
关于javascript - 无法让 $emit 将 prop 传递给 vuejs 中的父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53327212/