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

Question

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

从服务器获取的数据是这样的

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"]
    }
  ]

我使用v-for 来显示如下首选项：

<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>`

现在，由于所有首选项都具有相同的 options 数组，我无法弄清楚如何区分一个复选框组与另一个复选框组。因此为每个偏好组获取选中的复选框。

非常感谢任何提示。谢谢。

更新 这适用于input 类型，如@palash 答案所示。但不适用于 Vuetify v-checkbox。

Answer 1

在首选项对象中添加一个 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

>

Answer 2

首先，尝试为preferences数组中的每个对象添加一个空的selected数组：

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"

现在，您可以轻松查看每个首选项中的选定选项，例如：

• 对于订阅频率：
  • this.preferences[0].selected
• 主题：
  • this.preferences[1].selected
• 促销优惠：
  • this.preferences[2].selected

简单演示：

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>

复杂演示：

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>