I am facing an issue with two arrays containing custom components.
List A represents search results, while List B holds selected items.
Each component includes a template that displays the array item.
The problem arises when I try to move an item from List A to List B by clicking on a link. Instead of success, I encounter an error message stating
Cannot read property 'push' of undefinedProvided below is my complete Vue code. Can you identify where I may be going 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) {
// Upon click, add 'listaitem' to listB
this.listB.push(listaitem);
}
}
},
listbitem: {
template: '#listbitem-template',
props: ['listbitem']
}
}
});