Vue通过隐藏输入形成object

Question

I have a form that has nested v-for loops and inside those v-for loops I want to pass the id's of the properties and the types of houses found in each of those properties. To achieve this I'm using the hidden input as follows:

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

I already understand that v-model doesn't work for hidden inputs, that is why I'm using name . How do I pass the values of the hidden inputs to the form object in data below.

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

Or how do I get the values of the hidden inputs so that I can submit them alongside the rest of the data.

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

Since a hidden input would not be entered by a user, and would be initialized some other way, you can just create properties on your form backing object for the hidden inputs.

Here is a simplified (no v-for loops) example component.

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