CODEWITHSUNDEEP
javascripthtmlarraysvue.jslodash
user3714932
user3714932

Reputation: 1353

Vue get unique values from v-for looped iput text

I have a form that is iterating over properties, and for each of those properties, they have many house types e.g studio apartment, one bedrooom, two bedroom e.t.c

I want that for each property the user to fill in the rent charged in each house type in the property. And I'm doing it as follows:

<div v-for="(property, index) in properties" :key="index">
           {{ property.property_name }}
          <div v-for="(house_type, index) in property.house_type.data" :key="index">
              {{ house_type.type }}<br>
              <input type="text" v-model="form[index].rent">Rent<br>
          </div>
          <br>
 </div>

<script>
import { mapGetters, mapActions } from 'vuex'

data() {
    return {
            form:[],
    }
},

computed: {
     ...mapGetters({
        authenticated: 'auth/authenticated',
        token: 'auth/token',
        properties: 'property/properties',
    }),
  },

  watch: {
    properties(properties) {
        this.form = properties.map(_ => ({ rent: [] }))
    }
   }
</script>

The problem with this is that, if I fill in the rent for a studio apartment in Property 1 all the studio apartments in all the properties are filled with that value. How do I solve this problem. Thanks

Upvotes: 0

Views: 54

Answers (1)

Hannah
Hannah

Reputation: 1143

You are using index twice, both in your inner and outer loop. Try using e.g. propIndex and typeIndex instead.

<div v-for="(property, propIndex) in properties" :key="propIndex">
  {{ property.property_name }}
  <div v-for="(house_type, typeIndex) in property.house_type.data" :key="typeIndex">
    {{ house_type.type }}<br>
    <input type="text" v-model="form[propIndex].rent">Rent<br>
  </div>
  <br>
</div>

Upvotes: 3

Related Questions