Как получить Vue, чтобы поймать событие?

Отредактировано для исправления незарегистрированной синтаксической ошибки (см. Комментарии). Теперь это работает как хотелось бы.

У меня возникают проблемы при запуске обработчика событий в следующем коде 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>
Источник

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 свойства.

Источник
Другие вопросы по тегам