VueJS 计算返回最佳实践

如何解决VueJS 计算返回最佳实践

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

示例如下

// 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"

问题：

1. 从代码中，您可以看到我声明了空的结果数组 let results = [] 然后在返回结果之前从 forEach 数据填充结果。有没有更好的方法来返回每个循环数据而不声明空数组并在返回生成数据的数组之前填充它？

2. 有时，我不仅添加 id，还可能添加另一个像 item.internal = true。或者如果是多级，则为一级。

解决方法

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

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