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