Vue數(shù)據(jù)回顯表單無法編輯的解決方案
更新時間：2022年11月23日 14:53:24 作者：鯊魚唖
這篇文章主要介紹了Vue數(shù)據(jù)回顯表單無法編輯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue數(shù)據(jù)回顯表單無法編輯
在項目中，有時會碰到在進(jìn)行數(shù)據(jù)回顯的時候，表單無法編輯。
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組件數(shù)據(jù)回顯后無法清空
這種情況一般出現(xiàn)在 父組件 傳值給 子組件，我們通過props接收子組件的值，在子組件內(nèi)進(jìn)行回顯，回顯完成后進(jìn)行清空，發(fā)現(xiàn)清空不了。
在這種時候我們要記住在子組件是不能更改父組件的值的。
有兩種方法可以清空這個值
1：比較暴力的方法，我們將從父組件獲取到的值重新深復(fù)制一份，在子組件里使用新的數(shù)據(jù)，這樣就可以清空值了。
created() {
?? ?this.selectObj = JSON.parse(JSON.stringify(this.formInline))
},2：在子組件更改時通過一個方法告知父組件，讓父組件進(jìn)行更改，這樣傳到子組件的值就會相應(yīng)更改。這涉及到父子組件通信。
父子間通信：（父傳子）
父組件：
<operate ?? ?:isOperat="flag" ?? ?:formInline="dataadd"s" ></operate>
子組件：
props: {
?? ?isOperat: String,
?? ?formInline: Object,
}（子傳父）
子組件：
<input @click="sendMsg" type="button" value="給父組件傳遞值">
方法：
sendMsg(){
?? ?//func: 是父組件指定的傳數(shù)據(jù)綁定的函數(shù)，this.msg:子組件給父組件傳遞的數(shù)據(jù)
?? ?this.$emit('func',this.msg)
}?父組件：
<child @func="getMsgFormSon"></child>
方法：
getMsgFormSon(data){
?? ?this.msgFormSon = data
?? ?console.log(this.msgFormSon)
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用highcharts自定義圖例點(diǎn)擊事件
這篇文章主要為大家詳細(xì)介紹了vue使用highcharts自定義圖例點(diǎn)擊事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
關(guān)于IDEA中的.VUE文件報錯 Export declarations are not supported by cu
這篇文章主要介紹了關(guān)于IDEA中的.VUE文件報錯 Export declarations are not supported by current JavaScript version的問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了vue 遞歸組件的簡單使用示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了Vue常用的修飾符及應(yīng)用場景解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子
今天小編就為大家分享一篇vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vite+element-plus項目基礎(chǔ)搭建的全過程
最近看完Vue3和Vite文檔之后,就寫了個小demo,整體感覺下來還是很絲滑的,下面這篇文章主要給大家介紹了關(guān)于vite+element-plus項目基礎(chǔ)搭建的全過程,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue組件為什么data必須是一個函數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue中實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗的兩種方法
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗的兩種方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue項目中使用多選框的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01