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