[Vue] 關於 v-for 產表單 v-model bind 自定義 dataName

參考自
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'

},

]

}

},