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

Question

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

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

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

所以...我遇到的麻烦是，一旦我在列表 a 中有了我的列表，我想单击 a link 并将其添加到列表 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: []
}

这将允许您在 listaitem 组件中使用 this.listB.push(listaitem); 而不会引发错误

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

Moving items between arrays in vue.js

javascript

arrays

vue.js