Vue數據回顯表單無法編輯的解決方案

Posted on by

Vue數據回顯表單無法編輯

在項目中，有時會碰到在進行數據回顯的時候，表單無法編輯。

handleCurrency(item, statusList) {
        (this.statusList = statusList),
        (this.sizeForm.name = item.name),
        (this.sizeForm.type = item.type.disValue == "null" ? "" : item.type.dicValue),
        (this.sizeForm.number = item.number),
        (this.sizeForm.remark = item.remark)
    }

後來在回顯的方法裡加入瞭：

this.sizeForm = JSON.parse(JSON.stringify(item))

然後就可以正常使用瞭。

Vue組件數據回顯後無法清空

這種情況一般出現在  父組件  傳值給  子組件，我們通過props接收子組件的值，在子組件內進行回顯，回顯完成後進行清空，發現清空不瞭。

在這種時候我們要記住在子組件是不能更改父組件的值的。

有兩種方法可以清空這個值

1：比較暴力的方法，我們將從父組件獲取到的值重新深復制一份，在子組件裡使用新的數據，這樣就可以清空值瞭。

created() {
    this.selectObj = JSON.parse(JSON.stringify(this.formInline))
},

2：在子組件更改時通過一個方法告知父組件，讓父組件進行更改，這樣傳到子組件的值就會相應更改。這涉及到父子組件通信。

父子間通信：（父傳子）

父組件：

<operate
    :isOperat="flag"
    :formInline="dataadd"s"
></operate>

子組件：

props: {
    isOperat: String,
    formInline: Object,
}

（子傳父）

子組件：

<input @click="sendMsg" type="button" value="給父組件傳遞值">

方法：

sendMsg(){
    //func: 是父組件指定的傳數據綁定的函數，this.msg:子組件給父組件傳遞的數據
    this.$emit('func',this.msg)
} 

父組件：

<child @func="getMsgFormSon"></child>

方法：

getMsgFormSon(data){
    this.msgFormSon = data
    console.log(this.msgFormSon)
}

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：