编辑以更正未报告的语法错误(见评论)。它现在可以正常工作。
我无法在以下 Vue 代码中触发我的事件处理程序。
如您所见，有两个组件，posts 和 post，以及一个根 Vue 实例。 post 模板中的按钮应触发 remove 事件，该事件由 posts< 中的 使用帖子的索引调用 v-on:remove 处理程序捕获posts.deleteItem。有人可以提示我做错了什么吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Posts</title>
<!--link href="../css/bootstrap.css" rel="stylesheet" /-->
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<posts></posts>
</div>
<script>
window.onload = function() {
// A post
Vue.component('post-item', {
props: ['post'],
data: function() {
return {
editing: false,
_cachedItem: ''
}
},
methods: {
deleteItem(postId) {
debugger
this.$emit('remove', event.target.value);
},
},
template: `
<div v-on:remove="deleteItem">
<li v-show="!editing">
<p v-html="post.text"></p>
<button v-on:click="$emit('remove')">Delete</button>
</li>
</div>
`
})
Vue.component('posts', {
data: function() {
return {
posts: [
{id: 0, text: "Day at beach"},
{id: 1, text: "Carving the canyons"},
{id: 2, text: "Kickin' it"}
],
};
},
methods: {
deleteItem(index) {
debugger
this.posts.splice(index, 1);
}
},
template: `
<div>
<ol>
<post-item
v-for="(post, index) in posts"
v-bind:post="post"
v-bind:key="post.id"
v-on:remove="deleteItem(index)" />
</ol>
</div>
`
});
// Root Vue instance
new Vue({
el: '#app'
});
}
</script>
</body>
</html>
最佳答案
看起来您对事件的创建和处理有点困惑。
事件被发送到父组件。您通常不会在同一组件内添加事件监听器。
在 post-item 组件中，您真正需要的是使用适当的数据(即 post 对象)发出 remove 事件)
<div>
<li v-show="!editing">
<p v-html="post.text"></p>
<button @click="$emit('remove', post)">Delete</button>
</li>
</div>
然后在您的父组件(posts)中，在post-item 组件上监听此事件并分配事件处理程序
<post-item v-for="post in posts" :key="post.id" :post="post" @remove="deleteItem" />
并使用post payload 处理事件
methods: {
deleteItem (post) {
this.posts.splice(this.posts.indexOf(post), 1)
}
}
post-item 组件发出的 post 对象应该与传递给它的 prop 的对象完全相同，这就是为什么你可以直接使用 this.posts.indexOf(post)。无需搜索匹配的 id 属性。
关于vue.js - 如何让 Vue 捕捉事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52508802/