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

Question

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

财产	选定的物业类型
物业 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>

问题是，例如，当我studio_apartment在属性 1 中选择时，studio_apartment会检查所有属性。如何仅单独获取每个属性的选定复选框。谢谢。

标签： javascripthtmlvue.jsv-for

Answer 1

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

您可以更改form为基于 的对象数组propertyNames，使它们具有相同的数组长度；然后用的form迭代索引：indexv-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>

演示