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语句中的对象。

Vue.js未通过push（）检测数据更改

1 个答案: