Question

我有一个包含 v-for 循环嵌套的表单，在这些 v-for 循环中，我想传递属性的 id 以及在每个属性中找到的房屋类型。为了实现这一点，我使用了如下隐藏输入：

<template>
    <div>
    <form @submit.prevent="submit()">
       <div v-for="(property, propIndex) in properties" :key="propIndex">
           {{ property.name }}
          <div v-for="(house_type, typeIndex) in property.house_type.data" :key="typeIndex">
              {{ house_type.type }}<br>
              <input type="text" v-model="rent[propIndex][typeIndex]">Rent<br>
              <input type="text" v-model="house_quantity[propIndex][typeIndex]">How many<br>
              <input type="hidden" ref="property_id" :name="form.property_id"  value="hello"><br>
              <input type="hidden" ref="data" :name="form.house_type_id"  :value="house_type.type"><br>
          </div>
          <br>
       </div>
          <button>Submit</button>
    </form>
    </div>
</template>

我已经知道 v-model 不适用于隐藏输入，这就是我使用 name 的原因。如何将隐藏输入的值传递给下面数据中的表单对象。

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

export default {
data() {
    return {
            rent:[{}, {}, {}, {}, {}, {}],
            house_quantity:[{}, {}, {},{}, {}, {},{}, {}, {}],
            form:{
                property_id: [],
                house_type_id: [],
            }
            // form: new Array(7).fill({}),

    }
},
}
</script>

或者我如何获取隐藏输入的值，以便我可以将它们与其余数据一起提交。

methods: {
        async submit(){
            this.form.rent = this.rent
            this.form.house_quantity = this.house_quantity
            await axios.post('/api/landlord/set/up/store/part/3', this.form)
        }
  },

Answer 1

由于用户不会输入隐藏的输入，并且会以其他方式初始化，因此您只需在表单支持对象上为隐藏的输入创建属性即可。

这是一个简化的（无 v-for 循环）示例组件。

return

Vue 将隐藏输入传递给表单对象

1 个答案: