Vue数据回显表单无法编辑的解决方案
更新时间：2022年11月23日 14:53:24 作者：鲨鱼唖
这篇文章主要介绍了Vue数据回显表单无法编辑的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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)
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue+canvas实现移动端手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
在一般情况下，我们的项目肯定需要区分不同环境，那么Nuxt提供给我们这样的基本能力了么，下面我们就一起来了解一下2021-05-05
这篇文章主要为大家详细介绍了vue+mock.js实现前后端分离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最近有有个项目，通过选择不同的查询指标展示不同的表格，所以本文就介绍一下Element实现动态表格，具体实现代码记录如下，感兴趣的可以了解一下2021-08-08
这篇文章主要为大家详细介绍了vue实现div拖拽互换位置的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
配置vite.confgi.ts无法使用require问题以及解决
这篇文章主要介绍了配置vite.confgi.ts无法使用require问题以及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
解决vue中使用swiper插件问题及swiper在vue中的用法
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。这篇文章主要介绍了解决vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue中使用svg画路径图的相关知识，在这大家需要注意svg中不能使用html标签，例如div，img等，因此在svg中一般使用image标签放置图片，text图片放置文本内容,详细代码跟随小编一起看看吧2022-04-04
这篇文章主要给大家介绍了关于Vue3的vite中图片动态加载3种方式的相关资料,图片进入可视区域,进行动态加载图片操作,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了vue实现按钮切换图片，正向反向以及顺序切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
最新评论