Vue multiple questions, with each question having multiple options

Question

I have a list of properties in my database. I want the user to select the type of houses in the property.

Property	Selected property types
Property 1	['studio_apartment', 'one_bedroom', 'two_bedroom']
Property 2	['studio_apartment', 'one_bedroom']

To achieve this I am using the Vue v-for loop as follows:

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

The problem is when I select for example studio_apartment in property 1, then all the properties studio_apartment is checked. How do I only get the selected checkboxes for each property individually. Thanks.

Answer 1

This happens because there's only one form instance being shared in each loop iteration.

You could change form into an object array based on propertyNames, so that they have the same array length; then index into form with the iteration index of 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