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