Vue 从 v-for 循环输入文本中获取唯一值答案

【问题标题】：Vue get unique values from v-for looped iput textVue 从 v-for 循环输入文本中获取唯一值
【发布时间】：2021-05-28 15:44:53
【问题描述】：

我有一个遍历属性的表单，对于每个属性，它们都有许多房屋类型，例如studio apartment、one bedrooom、two bedroom e.t.c

我希望用户为每个房产填写房产中每种房屋类型收取的租金。我这样做如下：

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

问题在于，如果我填写属性 1 中的一室公寓的租金，则所有属性中的所有一室公寓都填充了该值。我该如何解决这个问题。谢谢

【问题讨论】：

标签： javascript html arrays vue.js lodash

【解决方案1】：

您在内循环和外循环中都使用了两次index。尝试使用例如propIndex 和 typeIndex 代替。

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

【讨论】：