javascript - 没有变异道具的双 for 循环,VUE3
问题描述
我有一个“数据”道具,它看起来像这样:
data = [
{
"label":"gender",
"options":[
{"text":"m","value":0},
{"text":"f","value":1},
{"text":"x", "value":null}
]
},
{
"label":"age",
"options":[
{"text":"<30", "value":0},
{"text":"<50","value":1},
{"text":">50","value":3}
]
}
]
在一个计算属性中,我想要一个看起来与 data 属性完全相同的新数组,不同之处在于 - 例如,假设 - 我想将选项数组中的值乘以 2。在普通的 js 中我做了这个之前,像这样:
data.forEach(item => {
item.options.forEach(option => {
if (option.value !== null && option.value !== 0) {
option.value *= 2;
}
})
});
现在我正在尝试使用.map() 在计算属性中执行此操作,因此它不会改变我的数据道具,但我不知道如何。
computed: {
doubledValues() {
var array = this.data.map((item) => {
//...
item.options.map((option) => {
//... option.value * 2;
});
});
return array;
}
}
解决方案
您可以使用map()
方法,如下所示:
computed: {
doubledValues() {
return this.data.map(item => ({...item, options: item.options.map(obj => {
return (obj.value != null) ? { ...obj, value: obj.value * 2 } : { ...obj }
})})
);
}
}
推荐阅读
- reactjs - 启动我的反应本机应用程序时出现参考错误
- json - 在查询中解构深层嵌套的 json
- javascript - 选择类的 .child 元素应该在其他 .child 元素之上,每个 .child 都在 .parent 元素内,具有绝对位置
- swift - 恢复进入后台模式的外围 BLE 服务
- jquery - 在 URL (Rails) 中存储 AJAX 参数
- javascript - 为什么 XMLHttpRequest.setRequestHeader() 将 undefined 或 null 类型设置为字符串?
- css - 在 row.getRowProps() 中更改 Material-ui 表格样式
- c# - .Net 核心 3.1。需要嵌套分组按项目每日数量显示
- c# - 如何处理关闭握手c#
- angular - ionic android签名的apk构建问题