VUE動態綁定v-model變量
轉載自: VUE動態綁定v-model變量（ui框架iview）
需求
表格內容欄位由後端api動態產生
<template>
<div class="input-column-boundary">
<el-row
v-for="(item) in formArray"
:key="item.key"
>
<label class="input-column-label threeSize" for="message-accountId">{{item.label}} :</label>
<el-input v-model="formInline[item.name]"></el-input>
</el-row>
</div>
</template>
<script>
export default {
name: 'InputSearchColumn',
props: {
formArray: {
type: Array,
required: true
},
// formArray: [
// { label: '帳號', name: 'username' },
// { label: '電話', name: 'phone' },
// { label: '地址', name: 'address' }
// ],
},
data () {
return {
formInline: {},
}
},
watch: {
formArray () {
this.formArray.map((item) => {
if (item && item.name) {
this.$set(this.formInline, item.name, item.modelValue)
}
})
}
},
methods: {
submitForm (formName) {
console.log('formInline', this.formInline)
}
}
}
</script>
- 怎麼讓變量值綁定到v-model上 ans:v-model="formInline[formItem.model]"
- 變量值綁定上去了，怎麼去讓數據顯示到子組件的“data”中
ans:通過watch監聽 formArray的值變化，然後使用下面的代碼進行綁定，不然會導緻v-model綁定的變量無法修改(資料響應失效)。
this.$set(this.formInline, item.model, item.modelValue);
Vue.set()和this.$set()介紹
如果在實例創建之後添加新的屬性到實例上，它不會觸發視圖更新(資料響應失效)。
data () {
return {
student: {
name: '',
sex: ''
}
}
}
mounted () { // ——鈎子函數，實例掛載之後
this.student.age = 24
}
正確寫法：this.$set(this.data,”key”,value')
mounted () { // ——鈎子函數，實例掛載之後
this.$set(this.student,"age", 24)
}