如何在没有重复的情况下收集Vue.js中的嵌套数据？

Question

关于我的项目“阿凡达数据库”的第二个问题。我想收集所有的标签从所有的化身到一个数组。当然，列表不应该包含重复的内容。

例如，我有三个带有"red“标签的化身，在数组"allTags”- "red“中只显示一次。

数据结构

data() {
  return {
    avatars: [
      {
        name: "Butterfly Blue",
        tags: ["animal", "butterfly", "blue"]
      },
      {
        name: "Butterfly Green",
        tags: ["animal", "butterfly", "green"]
      },
      {
        name: "Deer Shining",
        tags: ["animal", "deer"]
      }
    ]
  }
}

我试图使用computed属性获取这些标记：

allTags() {
  var result = [];
  for (var avatar in this.avatars) {
    for (var tag in avatar.tags) {
      if (!tag in result) {
        result += tag
      }
    }
  }
  return result
}

但是.我唯一能看到的输出是：[] -一个空数组。

我希望computed属性allTags返回来自所有avatar的所有标记的数组([])。

使用上面的{{ allTags }}示例数据应该是：

[ "animal", "butterfly", "blue", "green", "deer" ]

Answer 1

你应该用!result.includes(tag)代替!tag in result，用result.push(tag)代替result += tag

allTags() {
  var result = [];
  for (let avatar of this.avatars) {
    for (let tag of avatar.tags) {
      if (!result.includes(tag)) {
        result.push(tag)
      }
    }
  }
  return result
}

另外，我已经将for..in的用法替换为for..of，这是推荐的构造。

见演示：

​

new Vue({
  el: '#app',
  data() {
    return {
      avatars: [{
          name: "Butterfly Blue",
          tags: ["animal", "butterfly", "blue"]
        },
        {
          name: "Butterfly Green",
          tags: ["animal", "butterfly", "green"]
        },
        {
          name: "Deer Shining",
          tags: ["animal", "deer"]
        }
      ]
    }
  },
  computed: {
    allTags() {
      var result = [];
      for (let avatar of this.avatars) {
        for (let tag of avatar.tags) {
          if (!result.includes(tag)) {
            result.push(tag)
          }
        }
      }
      return result
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

<div id="app">
  <h4>Avatars:</h4>
  <p>{{ avatars }}</p>
  
  <hr>
  <h4>allTags:</h4>
  <p>{{ allTags }}</p>
</div>

​