i'm learning vue js 3 and inertia, but i'm having problem when displaying props data into my v-model from reactive form, please help me. Thank you

This is my code:

    data (props) {
        const form = reactive ({
            invoice_code: props.invoice.invoice_code,
            customer_name: props.invoice.customer_name,
            units: [{
                unit_quantity: props.invoice.units.unit_quantity,
                unit_type: props.invoice.units.unit_type,
                unit_name: props.invoice.units.unit_name,
                unit_description: props.invoice.units.unit_description,
                unit_completeness: props.invoice.units.unit_completeness,
                unit_cost: props.invoice.units.unit_cost,
            }],
        })
        function update () {
            Inertia.put(`/invoice/`  props.invoice.id, form)
        }
        return { form, update }
    },
    props: {
        invoice: Object,
    },
  }
};

how to displaying this [units] into v model?

its work when i use this

unit_quantity: props.invoice.units[0].unit_quantity,

but this only displaying with index [0], not to multi value

    <table>
     <tr>
       <th>Qty</th>
       <th>Unit</th>
       <th>Unit Name</th>
       <th>Description</th>
       <th>Completeness</th>
       <th>Cost</th>
     </tr>
     <tr v-for="(unit, index) in form.units" :key="unit.id">
        <td>
          <input type="number" v-model="unit.unit_quantity">
        </td>
        <td>
          <select v-model="unit.unit_type">
            <option value="Camera">Camera</option>
            <option value="Phone">Phone</option>
            <option value="Laptop-PC">Laptop-PC</option>
            <option value="Other">Other</option>
          </select>
        </td>
        <td>
          <input type="text" v-model="unit.unit_name">
        </td>           
        <td>
          <input type="text" v-model="unit.unit_description">
        </td>
        <td>
          <input type="text" v-model="unit.unit_completeness">
        </td>
        <td>
          <input type="number" v-model="unit.unit_cost">
        </td>
      </tr>
  </table>

this my template

CodePudding user response：

You only have 1 unit in your units array. Try setting your units like this.

data (props) {
        const form = reactive ({
            invoice_code: props.invoice.invoice_code,
            customer_name: props.invoice.customer_name,
            units: units: props.invoice.units,
        })
        function update () {
            Inertia.put(`/invoice/`  props.invoice.id, form)
        }
        return { form, update }
    },
    props: {
        invoice: Object,
    },
  }