VueJS：在 VueJS 2 中获取动态复选框值

Question

我正在使用 VueJS 2 和 Vuetify 来构建下面的订阅表单。从服务器获取并显示所有适用于订阅的首选项。图像中的首选项用于数字杂志订阅。对于印刷杂志的订阅偏好可能会有所不同。

Answer 1

从服务器获取的数据如下所示preferences: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: "1",&nbsp; &nbsp; &nbsp; title: "Subscription frequence",&nbsp; &nbsp; &nbsp; options: ["Daily", "Weekly", "Fortnight", "Monthly"]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: "2",&nbsp; &nbsp; &nbsp; title: "Topics",&nbsp; &nbsp; &nbsp; options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: "3",&nbsp; &nbsp; &nbsp; title: "Promotional Offers",&nbsp; &nbsp; &nbsp; options: ["Daily", "Weekly", "Fortnight", "Monthly", "Never"]&nbsp; &nbsp; }&nbsp; ]我曾经v-for显示如下首选项：<v-col&nbsp; v-for="pref in preferences"&nbsp; :key="pref.id">&nbsp; <span>{{ pref.title }}</span>&nbsp; <v-checkbox&nbsp; &nbsp; v-for="option in pref.options"&nbsp; &nbsp; :key="option"&nbsp; &nbsp; :v-model="pref.options"&nbsp; &nbsp; :label="option"&nbsp; &nbsp; color="red"&nbsp; &nbsp; value="option"&nbsp; &nbsp; hide-details&nbsp; >&nbsp; </v-checkbox></v-col>`现在，由于所有首选项都具有相同的options数组，我无法弄清楚如何区分一个复选框组和另一个。因此获得每个偏好组的选中复选框。非常感谢任何提示。谢谢。更新 这适用input于@palash 答案中所示的类型。但不适用于 Vuetify v-checkbox。

Answer 2

首先，尝试为selected数组中的每个对象添加一个空preferences数组：preferences: [{&nbsp; &nbsp; &nbsp; id: "1",&nbsp; &nbsp; &nbsp; title: "Subscription frequence",&nbsp; &nbsp; &nbsp; options: ["Daily", "Weekly", "Fortnight", "Monthly"],&nbsp; &nbsp; &nbsp; selected: []&nbsp; &nbsp;},&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; id: "2",&nbsp; &nbsp; &nbsp; title: "Topics",&nbsp; &nbsp; &nbsp; options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"],&nbsp; &nbsp; &nbsp; selected: []&nbsp; &nbsp;},&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; id: "3",&nbsp; &nbsp; &nbsp; title: "Promotional Offers",&nbsp; &nbsp; &nbsp; options: ["Daily", "Weekly", "Fortnight", "Monthly", "Never"],&nbsp; &nbsp; &nbsp; selected: []&nbsp; &nbsp;}]接下来，在模板中更新v-checkbox模型：:v-model="pref.options"到:v-model="pref.selected"现在，您可以轻松查看每个首选项中的选定选项，例如：对于订阅频率：this.preferences[0].selected对于主题：this.preferences[1].selected促销优惠：this.preferences[2].selected简单演示：Hide code snippetnew Vue({&nbsp; el: '#app',&nbsp; data: {&nbsp; &nbsp; selected: [],&nbsp; &nbsp; roles: [{id:1,name:"Client"},{id:2,name:"Admin"},{id:3,name:"Guest"}]&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script><div id="app">&nbsp; <div v-for="role in roles" :key="role.id">&nbsp; &nbsp; <label>{{role.name}}</label>&nbsp; &nbsp; <input type="checkbox" v-model="selected" :value="role"/>&nbsp; </div>&nbsp;&nbsp;&nbsp; <p>Selected Roles:</p>&nbsp; {{selected}}</div>复杂演示：Hide code snippetnew Vue({&nbsp; &nbsp;el: '#app',&nbsp; &nbsp;data: {&nbsp; &nbsp; &nbsp; preferences: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: "Subscription frequence",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: ["Daily", "Weekly", "Fortnight", "Monthly"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selected: []&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: "Topics",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selected: []&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp;}})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script><div id="app">&nbsp; &nbsp;<div v-for="pref in preferences" :key="pref.id">&nbsp; &nbsp; &nbsp; <h3>{{pref.title}}:</h3>&nbsp; &nbsp; &nbsp; <div v-for="option in pref.options" :key="option">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<label>{{option}}</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="checkbox" v-model="pref.selected" :value="option" /><br>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <p>Selected {{pref.title}}:</p>&nbsp; &nbsp; &nbsp; {{pref.selected}}&nbsp; &nbsp; &nbsp; <br><br><hr/>&nbsp; &nbsp;</div></div>

Answer 3

在首选项对象中添加 selectedOption 键。preferences: [{&nbsp; id: "1",&nbsp; title: "Subscription frequence",&nbsp; options: ["Daily", "Weekly", "Fortnight", "Monthly"],&nbsp; selectedOption: []},{&nbsp; id: "2",&nbsp; title: "Topics",&nbsp; options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"],&nbsp; selectedOption: []},{&nbsp; id: "3",&nbsp; title: "Promotional Offers",&nbsp; options: ["Daily", "Weekly", "Fortnight", "Monthly", "Never"],&nbsp; selectedOption: []}]<v-checkboxv-for="option in pref.options":key="option":v-model="pref.selectedOption":label="option"color="red"value="option"hide-details