3

编辑以纠正未报告的语法错误（见评论）。它现在可以按需要工作。

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

1 回答 1

3

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

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

您在组件中真正需要的只是使用适当的数据（即对象）post-item发出事件removepost

<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属性。

于 2018-09-26T01:53:37.743 回答