Question

已编辑以更正未报告的语法错误（请参阅注释）。现在，它可以按需运行了。

我无法在下面的Vue代码中触发事件处理程序。

如您所见，有两个组件posts和post，以及一个根Vue实例。 post模板中的按钮应触发remove事件，该事件由v-on:remove中的posts处理程序捕获，该事件使用帖子的索引调用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>

Answer 1

您似乎对事件的创建和处理有些困惑。

事件会一直发送到父组件。通常，您通常不会在同一组件中添加事件监听器。

您在post-item组件中真正需要的就是发出带有适当数据（即remove对象）的post事件

<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组件发出的post-item对象应该是传递给其prop的同一对象，这就是为什么您可以直接使用this.posts.indexOf(post)的原因。无需搜索匹配的id属性。

如何获得Vue赶上事件？

1 个答案: