Question

我有两个阵列，每个阵列都有自定义组件。

列出a是搜索结果。列表b是所选项目的列表。

每个组件都有一个模板，用于呈现数组中的项目。

所以......我遇到的麻烦是，一旦我在列表中列出了我的列表，我想点击一个链接并将其添加到列表b中。但是当我尝试添加项目时，我被告知Cannot read property 'push' of undefined

这是我的整个Vue。我做错了什么？

new Vue({

    el: '#search',
    data: {
        query: '',
        listA: '',
        listB: ''
    },
    methods: {

        search: function(event) {

            if (this.query != "") {
                this.$http({url: '/list-a?search=' + this.query, method: 'GET'}).then(function(response) {
                    this.listA = response.data
                });
            };

            event.preventDefault();
        }

    },
    components: {
        listaitem: {
            template: '#listaitem-template',
            props: ['lista-item'],
            methods: {
                selected: function(listaitem) {
                    // When clicked, this will add this listaitem to listB
                    this.listB.push(listaitem);
                }
            }
        },

        listbitem: {
            template: '#listbitem-template',
            props: ['listbitem']

        }  
    }
});

Answer 1

您应该将listA和listB初始化为空数组而不是空字符串，例如

data: {
        query: '',
        listA: [],
        listB: []
}

这样您就可以在this.listB.push(listaitem);组件中使用listaitem而不会抛出错误

在vue.js中的数组之间移动项目

1 个答案: