Moving items between arrays in vue.js

Question

I have two arrays with custom components in each.

List a is a search result. List b is a list of selected items.

Each component has a template that renders the item in the array.

So... the trouble I'm having is, once I have my list in list a, i want to click a link and have it add to list b. But when I try to add the item, I'm being told that Cannot read property 'push' of undefined

Here's my entire Vue. What am I doing wrong?

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']

        }  
    }
});

Ogie · Accepted Answer · 2016-03-08 10:43:28Z

1

You should initialize listA and listB as empty arrays instead of empty strings like

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

This will allow you use this.listB.push(listaitem); in the listaitem component without throwing an error

answered Mar 8, 2016 at 10:43

Ogie

1,3322 gold badges14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave Merwin Over a year ago

You were right! The other missing was that I needed to get the parent inorder to add it to that other array. so... this.$parent.listb not this.listb

Collectives™ on Stack Overflow

Moving items between arrays in vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related