时间戳

首页 > 解决方案 > VueJS 计算回报最佳实践

javascript - 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，也许添加另一个 like item.internal = true。或者如果它是多级的，则为水平。

标签： javascriptarraysvue.jsforeach

解决方案

您可以使用map方法和传播运算符添加id到item：

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

推荐阅读