如何让 Vue 捕捉事件?
How to get Vue to catch event?
已编辑以更正未报告的语法错误(请参阅评论)。它现在可以正常工作了。
我无法让我的事件处理程序在以下 Vue 代码中触发。
如您所见,有两个组件,posts
和 post
,以及一个根 Vue
实例。 post
模板中的按钮应触发 remove
事件,该事件由 posts
中的 v-on:remove
处理程序捕获,该处理程序使用 post。有人可以提示我做错了什么吗?
<!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
有效负载
处理事件
methods: {
deleteItem (post) {
this.posts.splice(this.posts.indexOf(post), 1)
}
}
post-item
组件发出的 post
对象应该与传入其 prop
的对象完全相同,这就是为什么您可以直接使用 this.posts.indexOf(post)
的原因。无需搜索匹配的 id
属性。
已编辑以更正未报告的语法错误(请参阅评论)。它现在可以正常工作了。
我无法让我的事件处理程序在以下 Vue 代码中触发。
如您所见,有两个组件,posts
和 post
,以及一个根 Vue
实例。 post
模板中的按钮应触发 remove
事件,该事件由 posts
中的 v-on:remove
处理程序捕获,该处理程序使用 post。有人可以提示我做错了什么吗?
<!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
有效负载
methods: {
deleteItem (post) {
this.posts.splice(this.posts.indexOf(post), 1)
}
}
post-item
组件发出的 post
对象应该与传入其 prop
的对象完全相同,这就是为什么您可以直接使用 this.posts.indexOf(post)
的原因。无需搜索匹配的 id
属性。