在一個 vue 組件中，我想在 for 回圈中生成動態輸入元素并將它們系結到 data.form 元素。
data() {
return {
form: {}
}
}
<b-form-checkbox v-model="form[key]['amount']" type="checkbox" :value="key"></b-form-checkbox>
我該如何處理這個，我嘗試了什么：
form.amount[key] // is working, but not really the best data structure, and the array is populated with null values for each for loop entry on init ...
form[key]['amount'] // not working
// the working example I mentioned is structured this way
form: {
amount: [],
}
也許有人可以幫助我...
uj5u.com熱心網友回復：
只需為表單欄位定義一個空陣列，例如return { formFields: [] }. 然后在此陣列中添加與要在螢屏上呈現的輸入欄位一樣多的值：
<template>
<form>
<input v-for="(field,index) in formFields" :key="index" v-model="fields[index]" type="text">
</form>
</template>
<script>
export default
{
data()
{
return {
formFields: []
};
},
mounted()
{
for (let i = 1; i <= 10; i ) this.formFields.push('');
}
}
</script>
如果您需要不同型別的輸入欄位 - 您將需要使用物件陣列而不是字串，并將欄位型別編碼為每個物件內的屬性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426723.html