如何让 Vue 捕捉事件？答案

【问题标题】：How to get Vue to catch event?如何让 Vue 捕捉事件？
【发布时间】：2019-03-01 16:54:58
【问题描述】：

已编辑以更正未报告的语法错误（请参阅 cmets）。它现在可以正常工作了。

我无法让我的事件处理程序在以下 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>

【问题讨论】：

“它现在可以按需要工作” this.posts.splice(postId, 1)
我替换了代码并相信只要vue.js 位于脚本的父目录中，它现在应该可以工作。

标签： vue.js vue-events

【解决方案1】：

看起来您对事件的创建和处理有点困惑。

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

您真正需要在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 属性。

【讨论】：

我是个白痴。 <post-item ...> 上有一个错位的“>”。查看它以进行建议的更改帮助我发现了它。
@TomRussell 啊，是的，我在您的问题代码中看到了。这就是为什么我喜欢我的答案中的自动关闭标签
是的。仍然没有语法错误，但在呈现的页面上很容易发现 v-on:remove="deleteItem(post.id)"。