我不知道如何制作一個javascript函式來更新這樣的陣列中物件內的“已檢查”值
array:[
{ id:1,
name:"foo"
options: [
{id:"one", checked: false},
{id:"two", checked: true}
]
},
{ id:2,
name:"faa"
options: [
{id:"one", checked: false},
{id:"two", checked: true}
]
}
]
我知道如何使用物件陣列來做到這一點，但我堅持這一點。關于我需要做什么的任何建議？謝謝
更新陣列格式的錯字
uj5u.com熱心網友回復：
如果我正確理解您的要求。您想checked通過 HTML 模板中的復選框更新屬性。
演示：
new Vue({
el: '#app',
data: {
array: [{
id:1,
name:"foo",
options: [
{id:"one", checked: false},
{id:"two", checked: true}]
}, {
id:2,
name:"faa",
options: [
{id:"one", checked: false},
{id:"two", checked: true}]
}]
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="data in array" :key="data.id">
<b>{{ data.name }}</b>
<div v-for="(checkboxData, index) in data.options" :key="index">
{{ checkboxData.id }} : <input type="checkbox" v-model="checkboxData.checked"/>
</div>
</div><br>
<b>Updated Value : </b>
<p>{{ array }}</p>
</div>uj5u.com熱心網友回復：
你所擁有的不是一個有效的 json 陣列我猜你想要編輯的是這個陣列
[
{
"id": 1,
"name": "foo",
"options": [
{
"id": "one",
"checked": false
},
{
"id": "two",
"checked": true
}
]
},
{
"id": 2,
"name": "faa",
"options": [
{
"id": "one",
"checked": false
},
{
"id": "two",
"checked": true
}
]
}
]
uj5u.com熱心網友回復：
您可以使用map()更新的值創建一個新的物件陣列。
const data = [{
id: 1,
name: "foo",
options: [
{ id: "one", checked: false },
{ id: "two", checked: true }
]
},
{
id: 2,
name: "faa",
options: [
{ id: "one", checked: false },
{ id: "two", checked: true }
]
}
];
const result = data.map((d) => {
return {
...d,
options: d.options.map((o) => {
return {
...o,
checked: !o.checked // for example invert the checked value
}
})
}
});
console.log(result);轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432664.html
標籤：javascript 数组 Vue.js
上一篇：如何在VueJs中添加下標符號