我正在學習 vue js 3 和慣性，但是當我從反應形式將道具資料顯示到我的 v-model 時遇到問題，請幫助我。謝謝
這是我的代碼：
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,
},
}
};
如何將這個 [單位] 顯示到 v 模型中？
當我使用它時它的作業
unit_quantity: props.invoice.units[0].unit_quantity,
但這僅顯示索引 [0]，而不顯示多值
<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>
這是我的模板
uj5u.com熱心網友回復：
您的單位陣列中只有 1 個單位。嘗試像這樣設定你的單位。
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,
},
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/338430.html
標籤：javascript Vue.js