Vue页面加载时通过计算属性从对象生成唯一store列表的实现方法

解决方案 #

你已经完成了去重的核心逻辑，只需要在拿到去重后的store编号数组后，再做一次映射转换为目标格式的对象即可。直接把逻辑写在计算属性里，页面加载时会自动计算生成目标数组：

computed: {
  storesOptions() {
    // 先拿到去重后的store字符串数组
    const uniqueStores = this.items.map(x => x.store).filter((v, i, s) => s.indexOf(v) === i)
    // 映射为要求的对象格式，把字符串类型的store转为数字id
    return uniqueStores.map(store => ({
      id: Number(store),
      name: `store ${store}`
    }))
  }
}

• 上述代码直接封装了名为storesOptions的计算属性，依赖原始的items数据，只要items发生变化会自动更新计算结果，页面初始化加载时就会自动生成符合要求的数组
• 如果你要保留原来的getUniqueZones方法也可以，直接调用它的返回值再做映射即可：

methods: {
  getUniqueZones() {
    return this.items.map(x => x.store).filter((v,i,s) => s.indexOf(v) === i)
  }
},
computed: {
  storesOptions() {
    return this.getUniqueZones().map(store => ({
      id: Number(store),
      name: `store ${store}`
    }))
  }
}

如果追求更简洁的写法，可以用Set做去重，性能和可读性更好：

computed: {
  storesOptions() {
    return [...new Set(this.items.map(x => x.store))].map(store => ({
      id: Number(store),
      name: `store ${store}`
    }))
  }
}

生成后直接在模板里通过storesOptions调用即可，比如下拉框选项可以直接用v-for="option in storesOptions" :key="option.id"遍历渲染。

内容的提问来源于stack exchange，提问作者Geoff_S