Как получить Vue, чтобы поймать событие? - PullRequest
Новая
       19

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

0 голосов
/ 26 сентября 2018

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

У меня проблемы с запуском обработчика событий в следующем коде Vue.

Как видите, есть два компонента, posts и * 1006.* и корневой экземпляр 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 Ответ

0 голосов
/ 26 сентября 2018

Похоже, вы немного запутались с созданием и обработкой событий.

События передаются в родительские компоненты.Обычно вы не добавляете прослушиватель событий в один и тот же компонент.

Все, что вам действительно нужно в компоненте 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 payload 

methods: {
  deleteItem (post) {
    this.posts.splice(this.posts.indexOf(post), 1)
  }
}

Объект post, испускаемый компонентом post-item, должен быть тем же объектом, переданным в prop, поэтому вы можете напрямую использовать this.posts.indexOf(post).Нет необходимости искать подходящие id свойства.

...