vue.js - 将用户界面相关数据添加到 Vue 数组道具的模式？

Question

如果道具不可编辑，如何在本地组件中添加与用户界面相关的数据？

假设您收到一个博客文章数组，每个文章都可以在界面中使用 v-for 进行迭代 - 但每个元素还需要一些仅与界面相关的额外属性，如“is_active”或“is_expanded”。

如果不应修改 props，如何将这些额外的属性添加到从 props 接收的数组中的每个元素？

在特殊情况下，我使用了惯性.js

因此，数据不能在接收 prop 的组件之外进行修改 - 在 Vuex 设置中，可能会改变来自后端的数据，并在进入组件之前为接口做好准备，但这在此处不可用。

Answer 1

创建一个计算属性，它映射 prop 数组并添加额外的属性

computed:{
    _array(){
      return this.propArray.map((item) => { 
                                  return {
                                    ...item,is_active:false,is_expanded:false
})

    }
  }