參考自
https://forum.vuejs.org/t/v-model-with-dynamically-created-inputs-with-v-for/9556這邊遇到問題： 想利用 v-for 產表單， 同時綁不同「已預設好名稱」的 key 。
原先讓 v-model 指向在 data 設好的 name = '', account = '' ... ， (v-model = 'this.
dataName')
但這只會指向記憶體位置的空字串
最後解決方案： data 建立一個物件， 內含符合自己命名的 key ， value 為空 ，
並在 v-for items 的 items 塞對應的 key (String) 給 v-model 讀取
描述得不好， 直接上範
<div
v-for="(item, index) in fromApiData"
:key="index"
>
<label for="" class="label form__label w-4/5">{{ item.title }}</label>
<input
class="input form__input w-4/5"
type="text"
:placeholder="item.detail || '未設定'"
v-model="inputCatcher[item.model]"
/>
</div>
// 其他省略
data () {
return {
inputCatcher: {
name: '',
account: '',
},
}
},
computed: {
fromApiData () {
return [
{
title: '名稱',
detail: this.user.name, // user 為從 api 抓到的資料
// model: this.name 原本錯誤的ㄒ
model: 'name'
},
{
title: '帳號',
detail: this.user.account,
model: 'account'
},
]
}
},
