Динамическое добавление массива объектов в Vue (проблема реактивности)

Question

Я знаю, что для того, чтобы объект или массив были реактивными в Vue, его свойства должны быть определены в корневой структуре данных.

Какой лучший способ добавить массив объектов в существующую переменную, определенную в корневой структуре данных, и сделать каждое свойство каждого элемента в этом массиве реактивным ?

Я попытался перебрать массив и добавить каждый к корневой модели данных, то есть:

  these_terms.forEach(function(term, idx) {
    term.selected = false;
    Vue.set(vm.game.set,idx,term);
  });

Однако Vue по-прежнему не отвечает на свойство «term.selected» при его последующем изменении.

Есть ли лучший способ достижения моей цели, или мне нужно прибегнуть к $ forceUpdate? (в руководстве говорится, что в 99% случаев, используя $ forceUpdate, вы делаете что-то не так, отсюда и этот пост)

Answer 1

В родительском компоненте выполните следующие действия:

1. Создать атрибут данных с пустым массивом, начинающимся с
2. Создайте кнопку, которая вызывает метод
3. В этом методе нажмите на пустой массив.

Пример шага 3

    methods: {
      _addGroup: function() {
        let result = {
          id: this.wizardGroups.length + 1,
          name: '',
        };
        this.wizardGroups.push(result);
      },

Если вам необходимо добавить дополнительные свойства после этого, вы можете перебрать массив объектов и применить Vue.set()

Answer 2

Извините, если я неправильно понял, но почему вы не импортируете массив и не переводите его в переменную данных Vue?

import xx from "xxxx.js"

export default {
    data() {
        return {
           y: xx
         }
      }
}