Vue多题，每题有多个选项

Question

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

Property	Selected property types
Property 1	['studio_apartment', 'one_bedroom', 'two_bedroom']
Property 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>

问题是当我 select 例如属性 1 中的 studio_apartment 时，所有属性 studio_apartment 都会被检查。我如何才能单独获得每个属性的 selected 复选框。谢谢

Answer 1

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

你可以把form改成一个基于propertyNames的对象数组，使它们的数组长度相同；然后使用 v-for:

的迭代 index 索引到 form

<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

Vue多题，每题有多个选项

Vue multiple questions, with each question having multiple options

html

javascript

vue.js

v-for