时间戳

首页 > 解决方案 > 从 vuejs 中的数组返回唯一值

arraylist - 从 vuejs 中的数组返回唯一值

问题描述

我正在使用 Vuejs 和 Vuex 返回一个项目对象数组。这些项目可以多次提交到具有相同名称的数据库。我需要在 Vuejs 的数组中创建一个唯一项目名称列表。

从所有项目下方的地图吸气剂返回一个看起来像的对象数组

[
  {"name": "item one", "number": "001", "size": "4000kb"}
  {"name": "item two", "number": "002", "size": "5000kb"}
  {"name": "item three", "number": "003", "size": "6000kb"}
]


   methods: {
    ...mapActions(["fetchItems"])
  },
  computed: {
    ...mapGetters(["allItems"]),
 itemNames: function() {
      return [...new Set(this.allItems.name)]
    } 
  },
  created() {
    this.fetchItems(),
    this.itemNames()
  },

在计算属性 itemNames 中，如果我取消 .name [..new Set(this.allItems)] 数组将返回完整的对象 - 我怎样才能将名称拉到列表中？

v-for 不返回数组

<v-list-item v-for="(itemName, index ) in itemNames" :key="index">
  <v-list-item-content> {{ itemName }}</v-list-item-content>
</v-list-item>

谢谢你的帮助。

标签： arraylistvuejs2uniquevuex

解决方案

我通过将项目映射到这样的新数组来解决了计算属性中的这个问题

 itemNames: function() {
      return  [...new Set(this.allItems.map(x => x.item.Name))]
    }

推荐阅读