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

Question

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

Answer 1

从服务器获取的数据如下所示

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 2

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

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

简单演示：

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>

复杂演示：

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>

Answer 3

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