Vue.js 如何让Vue捕捉事件?

Vue.js 如何让Vue捕捉事件?,vue.js,vue-events,Vue.js,Vue Events,编辑以更正未报告的语法错误(请参阅注释)。它现在可以按预期工作 在以下Vue代码中启动事件处理程序时遇到问题 如您所见,有两个组件,posts和post,以及一个rootVue实例。post模板中的按钮应触发remove事件,该事件由posts中的v-on:remove处理程序捕获,该处理程序调用posts.deleteItem,并带有post的索引。有人能告诉我我做错了什么吗 帖子 window.onload=函数(){ //职位 Vue.组件(“后项目”{ 道具:['post'], 数据:

编辑以更正未报告的语法错误(请参阅注释)。它现在可以按预期工作

在以下Vue代码中启动事件处理程序时遇到问题

如您所见,有两个组件,
posts
post
,以及一个root
Vue
实例。
post
模板中的按钮应触发
remove
事件,该事件由
posts
中的
v-on:remove
处理程序捕获,该处理程序调用
posts.deleteItem
,并带有post的索引。有人能告诉我我做错了什么吗


帖子
window.onload=函数(){
//职位
Vue.组件(“后项目”{
道具:['post'],
数据:函数(){
返回{
编辑:错,
_cachedItem:'
}
},
方法:{
删除项目(postId){
调试器
这是.emit('remove',event.target.value);
},
},
模板:`
  • 删除
  • ` }) Vue.component('posts'{ 数据:函数(){ 返回{ 职位:[ {id:0,文本:“海滩日”}, {id:1,文本:“雕刻峡谷”}, {id:2,文本:“踢它”} ], }; }, 方法:{ 删除项目(索引){ 调试器 此柱拼接(索引,1); } }, 模板:` ` }); //根Vue实例 新Vue({ el:“#应用程序” }); }
    看起来您对事件的创建和处理有些困惑

    事件被发射到父组件。通常不会在同一组件中添加事件侦听器

    post项
    组件中真正需要的是发出带有适当数据的
    remove
    事件(即
    post
    对象)

    
    
  • 删除
  • 然后在父组件(
    posts
    )中,在
    post项
    组件上侦听此事件并分配事件处理程序

    
    
    并使用
    post
    有效负载处理事件

    方法:{
    删除项目(员额){
    this.posts.拼接(this.posts.indexOf(post),1)
    }
    }
    

    post项目
    组件发出的
    post
    对象应该是传递到其
    prop
    的同一个对象,这就是为什么可以直接使用
    this.posts.indexOf(post)
    。没有必要去搜索匹配的
    id
    属性。

    我是个白痴。
    上有一个错位的“>”。查看它以做出您建议的更改帮助我发现了它。@TomRussell啊,是的,我在您的问题代码中看到了它。这就是为什么我喜欢我的回答中的自动关闭标签是的。仍然没有语法错误,但很容易在呈现的页面上发现
    v-on:remove=“deleteItem(post.id)”
    。“现在可以按需要工作了”我替换了代码,并相信只要
    vue.js
    在脚本的父目录中,它就应该可以工作。