Vue數(shù)據(jù)回顯表單無(wú)法編輯的解決方案
更新時(shí)間：2022年11月23日 14:53:24 作者：鯊魚(yú)唖
這篇文章主要介紹了Vue數(shù)據(jù)回顯表單無(wú)法編輯的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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框架之goodvs組件開(kāi)發(fā)詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要給大家介紹了關(guān)于前端開(kāi)發(fā)利器Vite完整版詳解的相關(guān)資料,Vite是一種基于ES模塊的開(kāi)發(fā)服務(wù)器和構(gòu)建工具,專為現(xiàn)代化的前端開(kāi)發(fā)而設(shè)計(jì),需要的朋友可以參考下2023-11-11
解決el-cascader在IE11瀏覽器中加載頁(yè)面自動(dòng)展開(kāi)下拉框問(wèn)題
這篇文章主要為大家介紹了解決el-cascader在IE11瀏覽器中加載頁(yè)面自動(dòng)展開(kāi)下拉框問(wèn)題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue3通過(guò)canvas實(shí)現(xiàn)圖片圈選功能
這篇文章將給大家詳細(xì)介紹了vue3如何通過(guò)canvas實(shí)現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴快來(lái)跟隨小編一起學(xué)習(xí)一下吧2023-12-12
vue中的虛擬dom知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue中的虛擬dom知識(shí)點(diǎn)總結(jié)，文章圍繞主題內(nèi)容展開(kāi)詳細(xì)介紹，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-04-04
Django+Vue.js搭建前后端分離項(xiàng)目的示例
本篇文章主要介紹了Django+Vue.js搭建前后端分離項(xiàng)目的示例，具有一定參考價(jià)值，有興趣的可以了解一下2017-08-08
碰到一個(gè)問(wèn)題,選擇框的數(shù)據(jù)是后端傳過(guò)來(lái)的,下拉框的數(shù)據(jù)也是后端傳過(guò)來(lái)的,但是打開(kāi)下拉框時(shí),發(fā)現(xiàn)數(shù)據(jù)沒(méi)有高亮,最后通過(guò)只要選擇框v-model給的值和option的value綁定的值一致,就可以高亮,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了Vue3父子通訊方式及Vue3插槽的使用方法詳解,需要的朋友可以參考下2023-01-01
vue打包terser壓縮去除控制臺(tái)打印和斷點(diǎn)過(guò)程
這篇文章主要介紹了vue打包terser壓縮去除控制臺(tái)打印和斷點(diǎn)過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue數(shù)據(jù)變化后頁(yè)面更新詳細(xì)介紹
這篇文章主要介紹了Vue在數(shù)據(jù)發(fā)生變化后是如何更新頁(yè)面的，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10