VueJS 计算回报最佳实践答案

【问题标题】：VueJS computed return best practiceVueJS 计算回报最佳实践
【发布时间】：2021-01-23 20:02:33
【问题描述】：

我一遍又一遍地使用这段代码。想知道是否有更好的方法来制作这个快捷方式

这是一个例子

// items.js

export default [
  { title: 'ABC', href: 'javascript:void(0)' },
  { title: 'DEF', href: 'javascript:void(0)' }
]

// index.vue

<script>
import items from './items.js'
export default: {
  computed: {
    links() {
      let results = []
      items.forEach((item,index) => {
        item.id = index

        results.push(item)
      })
      return results
    }
  }
}
</script>

//returned result = { title: 'ABC', href: 'javascript:void(0)', id: 0 }

我只想为计算属性中的每个对象添加 id，这样我就不用担心使用v-for="(item, index) in items" :key="index"。而不是在模板中使用v-for="item in links" :key="item.id"

问题：

从代码中，您可以看到我声明了空的结果数组let results = []，然后在返回结果之前从 forEach 数据填充结果。有没有更好的方法来返回每个循环数据而不声明空数组并在返回生成的数据数组之前填充它？
有时，我不只是添加 id，可能会添加另一个，例如 item.internal = true。如果它是多级的，或者水平。

【问题讨论】：

这是id 属性的唯一用途吗？您实际上只是将一个变量名换成另一个变量名，并引入了不必要的复杂性，并且可能无论如何您都会恢复。
此外，由于 items 永远不会改变，因此没有太多理由将其设为 computed 属性。最好将links 放入data() 并在mounted() 中进行分配/映射。
本质上只是一个ID，但其中一些需要更多..，如果有孩子我需要初始showchild = false，内部数据，需要转换日期格式&etc
您还使用id 属性做什么？如果唯一的原因是 v-for 键具有唯一值，则最好像以前在 v-for 中那样做。如果在安装组件时需要，您仍然可以映射额外的数据。

标签： javascript arrays vue.js foreach

【解决方案1】：

您可以使用map 方法和扩展运算符将id 添加到item：

 computed: {
    links() {
       return  items.map((item,index)=>({id:index,...item}))
    }
  }

【讨论】：

谢谢，这项工作。我可以知道是否有映射多级的。数据示例：{ title: 'ABC', href: 'javascript:void(0)', child: [ title: 'XYZ' ] }。它还能够在 map 中执行 if,else 逻辑吗？
你可以这样做items.map((item,index)=>({id:index,child: [ {title: 'XYZ' }] ,...item}))