Перемещение элементов между массивами в vue.js

Question

У меня есть два массива с пользовательскими компонентами в каждом.

Список a - результат поиска. Список b - это список выбранных элементов.

Каждый компонент имеет шаблон, который отображает элемент в массиве.

Итак, проблема в том, что когда у меня есть список в списке a, я хочу щелкнуть ссылку и добавить ее в список 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 компонента, не бросая ошибку