没有变异道具的双循环,VUE3
Double for loop without mutating prop, VUE3
我有一个 'data' 道具,看起来像这样:
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;
}
}
直接复制objects/arrays。会是这样的
computed: {
doubledValues() {
return this.data.map((item) => {
const resultItem = {...item};
resultItem.options = item.options.map((option) => {
const copyOption = {...option};
if (copyOption.value !== null && copyOption.value !== 0) {
copyOption.value *= 2;
}
return copyOption;
});
return resultItem;
});
}
}
你可以使用map()
方法,像这样:
computed: {
doubledValues() {
return this.data.map(item => ({...item, options: item.options.map(obj => {
return (obj.value != null) ? { ...obj, value: obj.value * 2 } : { ...obj }
})})
);
}
}
我有一个 'data' 道具,看起来像这样:
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;
}
}
直接复制objects/arrays。会是这样的
computed: {
doubledValues() {
return this.data.map((item) => {
const resultItem = {...item};
resultItem.options = item.options.map((option) => {
const copyOption = {...option};
if (copyOption.value !== null && copyOption.value !== 0) {
copyOption.value *= 2;
}
return copyOption;
});
return resultItem;
});
}
}
你可以使用map()
方法,像这样:
computed: {
doubledValues() {
return this.data.map(item => ({...item, options: item.options.map(obj => {
return (obj.value != null) ? { ...obj, value: obj.value * 2 } : { ...obj }
})})
);
}
}