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

Posted 2023-02-23

【中文标题】如何在 Vue.js 中收集没有重复的嵌套数据？

【英文标题】：How to collect nested data in Vue.js without duplicates?

【发布时间】：2020-04-11 07:20:48

【问题描述】：

关于我的项目“头像数据库”的第二个问题。我想将所有头像中的所有标签收集到一个数组中。当然，列表不应包含重复项。

例如，我有 3 个带有标签“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 返回一个包含所有头像的所有标签的数组 ([])。

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

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

【参考方案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>

【讨论】：

非常感谢！一件事......为什么for..of而不是for..in？