Vue.js 未使用 push() 检测数据更改答案

【问题标题】：Vue.js not detecting data change with push()Vue.js 未使用 push() 检测数据更改
【发布时间】：2019-11-19 20:11:48
【问题描述】：

我有这个方法可以在我的 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 检测到数据更改，还是不是这样？

【问题讨论】：

你的意思是vue没有检测到属性有一些变化应该重新渲染吗？
@SaJed this.attributes[attribute.name].attributes[item.id].attributes 的每个项目仍然是一个空数组，在对所有数据运行此方法之后 - 这基本上是问题:)
如果我控制台日志this.attributes[attribute.name].attributes[item.id].attributes，我可以看到项目被推送到数组，但 Vue 似乎没有检测到。
你说得对，Vue 应该能够检测到变化。您能否在在线编辑器中制作一个简化示例以帮助您？
@KrisD.J.现在看看

标签： javascript arrays vue.js ecmascript-6 vuejs2

【解决方案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 语句中被设置为数组而不是对象。

【讨论】：