如何解决将用户界面相关数据添加到Vue数组道具的模式?
如果道具不可编辑,那么如何在本地组件中添加与用户界面相关的数据呢?
假设您收到了一系列博客帖子,则可以使用v-for在界面中迭代每个帖子-但每个元素还需要一些仅与界面相关的额外属性,例如“ is_active”或“ is_expanded”。
如果不应该修改道具,如何将这些额外的属性添加到从道具接收的数组中的每个元素上?
在特定情况下,我正在使用this stackblitz
因此无法在接收道具的组件外部修改数据-在Vuex设置中,可能会变异来自后端的数据并在进入组件之前为接口做准备,但这在此处不可用
解决方法
创建一个计算属性,该属性映射prop数组并添加额外的属性
computed:{
_array(){
return this.propArray.map((item) => {
return {
...item,is_active:false,is_expanded:false
})
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。