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

【问题标题】：Vue pass hidden inputs to form objectVue 将隐藏的输入传递给表单对象
【发布时间】：2021-05-30 22:38:33
【问题描述】：

我有一个嵌套了 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)
        }
  },

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

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

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

<template>
  <div class="hidden-input-substitute">
    <div class="row">
      <div class="col-md-6">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label>First name</label>
            <input type="text" class="form-control" v-model="formObject.firstName">
          </div>
          <div class="form-group">
            <label>Last name</label>
            <input type="text" class="form-control" v-model="formObject.lastName">
          </div>
          <button class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        formObject: {
          firstName: '',
          lastName: '',
          hiddenValueOne: 'hiddenOne',
          hiddenValueTwo: 'hiddenTwo'
        }
      }
    },
    methods: {
      submitForm() {
        console.log(this.formObject);
        axios.post('/path/to/endpoint', this.formObject)
        .then( response => console.log(response) )
        .catch( error => console.log(error) )
      }
    }

  }
</script>

【讨论】：