我有一個表單，用戶可以選擇單擊“添加”按鈕并將內容輸入新欄位。我目前已經為欄位動態生成了 v-model，但我意識到我需要在 setup 函式中注冊/回傳它們中的每一個才能使用它們。
如果我不知道用戶將決定添加多少個欄位，如何為不同的輸入欄位生成和注冊/回傳 v-model？
<div
v-for="(content, i) in contentFields"
:key="i"
>
<div>Content {{ i }}</div>
<q-input
:v-model="`contentName_` i"
outlined
type="text"
dense
/>
</div></div>
uj5u.com熱心網友回復：
用簡單的動態 v-models 看看下面的代碼片段：
new Vue({
el: "#demo",
data() {
return {
contentFields: [{name: '', desc: ''}]
}
},
methods: {
addInput() {
let newI = this.contentFields.length
this.contentFields.push({name: '', desc: ''})
},
setD() {
console.log(this.contentFields)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button @click="addInput">add</button>
<div v-for="(content, i) in contentFields" :key="i">
<div>Content {{ i }}</div>
<input
v-model="content.name"
outlined
type="text"
dense
@change="setD"
/>
<input
v-model="content.desc"
outlined
type="text"
dense
@change="setD"
/>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414935.html
標籤：
上一篇：在firebase存盤中一次上傳多張照片并將其URL存盤在firestore檔案中（firebase版本9）
下一篇：在Vuejs中獲取父元素的寬度