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

Posted 2023-02-22

【中文标题】Vue 从 v-for 循环输入文本中获取唯一值

【英文标题】：Vue get unique values from v-for looped iput text

【发布时间】：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 中的一室公寓的租金，则所有属性中的所有一室公寓都填充了该值。我该如何解决这个问题。谢谢

【参考方案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>