Vue.js не обнаруживает изменение данных с помощью push ()

Question

У меня есть этот метод, который устанавливает структуру данных в моем attributes объекте.

setAttributes(data) {
  const attr = data.attributes;

  attr.forEach(attribute => {
    attribute.attributes.forEach(item => {
      if (!this.attributes[attribute.name]) {
        this.$set(this.attributes, attribute.name, {
          name: attribute.name,
          attributes: []
        });
      }

      if (!this.attributes[attribute.name].attributes[item.id]) {
        this.$set(this.attributes[attribute.name].attributes, item.id, {
          name: item.name.value,
          attributes: []
        });
      }

      this.attributes[attribute.name].attributes[item.id].attributes.push(item);
    });
  });
}

Все работает, кроме последней строки this.attributes[attribute.name].attributes[item.id].attributes.push(item);, где Vue не обнаруживает изменение данных, а массив все еще пуст.

Насколько мне известно, push() должен заставить Vue обнаруживать изменение данных или это не так?

Answer 1

Понял, работает с этим кодом:

setAttributes(data) {
  const attr = data.attributes;

  attr.forEach(attribute => {
    const name = attribute.name
      .toLowerCase()
      .replace(/[^a-z0-9 -]/g, '')
      .replace(/\s+/g, '_');

    if (!this.attributes[name]) {
      this.$set(this.attributes, name, {
        name: attribute.name,
        attributes: {}
      });
    }

    attribute.attributes.forEach(item => {
      if (!this.attributes[name].attributes[item.id]) {
        this.$set(this.attributes[name].attributes, item.id, {
          name: item.name.value,
          attributes: []
        });
      }

      this.attributes[name].attributes[item.id].attributes.push(item);
    });
  });
}

Проблема заключалась в том, что attributes был задан как массив, а не как объект в первом операторе if.