TA貢獻(xiàn)1111條經(jīng)驗(yàn) 獲得超0個(gè)贊
從服務(wù)器獲取的數(shù)據(jù)如下所示
preferences: [
{
id: "1",
title: "Subscription frequence",
options: ["Daily", "Weekly", "Fortnight", "Monthly"]
},
{
id: "2",
title: "Topics",
options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"]
},
{
id: "3",
title: "Promotional Offers",
options: ["Daily", "Weekly", "Fortnight", "Monthly", "Never"]
}
]
我曾經(jīng)v-for顯示如下首選項(xiàng)：
<v-col
v-for="pref in preferences"
:key="pref.id"
>
<span>{{ pref.title }}</span>
<v-checkbox
v-for="option in pref.options"
:key="option"
:v-model="pref.options"
:label="option"
color="red"
value="option"
hide-details
>
</v-checkbox>
</v-col>`
現(xiàn)在，由于所有首選項(xiàng)都具有相同的options數(shù)組，我無法弄清楚如何區(qū)分一個(gè)復(fù)選框組和另一個(gè)。因此獲得每個(gè)偏好組的選中復(fù)選框。
非常感謝任何提示。謝謝。
更新 這適用input于@palash 答案中所示的類型。但不適用于 Vuetify v-checkbox。
TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊
首先，嘗試為selected數(shù)組中的每個(gè)對象添加一個(gè)空preferences數(shù)組：
preferences: [{
id: "1",
title: "Subscription frequence",
options: ["Daily", "Weekly", "Fortnight", "Monthly"],
selected: []
},
{
id: "2",
title: "Topics",
options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"],
selected: []
},
{
id: "3",
title: "Promotional Offers",
options: ["Daily", "Weekly", "Fortnight", "Monthly", "Never"],
selected: []
}
]
接下來，在模板中更新v-checkbox模型：
:v-model="pref.options"
到
:v-model="pref.selected"
現(xiàn)在，您可以輕松查看每個(gè)首選項(xiàng)中的選定選項(xiàng)，例如：
對于訂閱頻率：
this.preferences[0].selected
對于主題：
this.preferences[1].selected
促銷優(yōu)惠：
this.preferences[2].selected
簡單演示：
Hide code snippet
new Vue({
el: '#app',
data: {
selected: [],
roles: [{id:1,name:"Client"},{id:2,name:"Admin"},{id:3,name:"Guest"}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="role in roles" :key="role.id">
<label>{{role.name}}</label>
<input type="checkbox" v-model="selected" :value="role"/>
</div>
<p>Selected Roles:</p>
{{selected}}
</div>
復(fù)雜演示：
Hide code snippet
new Vue({
el: '#app',
data: {
preferences: [{
id: "1",
title: "Subscription frequence",
options: ["Daily", "Weekly", "Fortnight", "Monthly"],
selected: []
},
{
id: "2",
title: "Topics",
options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"],
selected: []
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="pref in preferences" :key="pref.id">
<h3>{{pref.title}}:</h3>
<div v-for="option in pref.options" :key="option">
<label>{{option}}</label>
<input type="checkbox" v-model="pref.selected" :value="option" /><br>
</div>
<p>Selected {{pref.title}}:</p>
{{pref.selected}}
<br><br><hr/>
</div>
</div>
TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊
在首選項(xiàng)對象中添加 selectedOption 鍵。
preferences: [
{
id: "1",
title: "Subscription frequence",
options: ["Daily", "Weekly", "Fortnight", "Monthly"],
selectedOption: []
},
{
id: "2",
title: "Topics",
options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"],
selectedOption: []
},
{
id: "3",
title: "Promotional Offers",
options: ["Daily", "Weekly", "Fortnight", "Monthly", "Never"],
selectedOption: []
}
]
<v-checkbox
v-for="option in pref.options"
:key="option"
:v-model="pref.selectedOption"
:label="option"
color="red"
value="option"
hide-details
舉報(bào)