Vue 多个问题，每个问题都有多个选项

问题描述

我的数据库中有一个属性列表。我希望用户选择房产中的房屋类型。

财产	选定的属性类型
属性 1	['studio_apartment','one_bedroom','two_bedroom']
属性 2	['studio_apartment','one_bedroom']

为了实现这一点，我使用了 Vue v-for 循环，如下所示：

<template>
  <div v-for="(name,index) in propertyNames" :key="index">
    NAME: {{ name }}<br />
    <input
      type="checkBox"
      value="studio_apartment"
      v-model="form.property_type"
    />Studio apartment<br />
    <input
      type="checkBox"
      value="one_bedroom"
      v-model="form.property_type"
    />One bedroom<br />
    <input
      type="checkBox"
      value="two_bedroom"
      v-model="form.property_type"
    />Two bedroom<br />

    SELECTED: {{}}
  </div>
</template>

<script>
import { mapGetters,mapActions } from "vuex";

export default {
  data() {
    return {
      form: {
        property_type: [],},};
  },</script>

问题是当我在属性 1 中选择例如 studio_apartment 时，所有属性 studio_apartment 都会被检查。我如何只分别为每个属性获取选定的复选框。谢谢。

解决方法

发生这种情况是因为在每次循环迭代中只有一个 form 实例被共享。

你可以将form改为基于propertyNames的对象数组，使它们具有相同的数组长度；然后用 form 的迭代 index 索引到 v-for：

<template>
  <div>
    <div v-for="(name,index) in propertyNames" :key="index">
      NAME: {{ name }}<br>
      <input type="checkbox" value="studio_apartment" v-model="form[index].property_type">Studio apartment<br>
      <input type="checkbox" value="one_bedroom" v-model="form[index].property_type">One bedroom<br>
      <input type="checkbox" value="two_bedroom" v-model="form[index].property_type">Two bedroom<br>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const propertyNames = ['Property 1','Property 2']
    return {
      propertyNames,form: propertyNames.map(name => ({ property_type: [] }))
    }
  }
}
</script>

demo