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使用highcharts自定义图例点击事件
这篇文章主要为大家详细介绍了vue使用highcharts自定义图例点击事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
关于IDEA中的.VUE文件报错 Export declarations are not supported by cu
这篇文章主要介绍了关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
vue 递归组件的简单使用示例
这篇文章主要介绍了vue 递归组件的简单使用示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
Vue常用的修饰符及应用场景解读
这篇文章主要介绍了Vue常用的修饰符及应用场景解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue路由守卫,限制前端页面访问权限的例子
今天小编就为大家分享一篇vue路由守卫,限制前端页面访问权限的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vite+element-plus项目基础搭建的全过程
最近看完Vue3和Vite文档之后,就写了个小demo,整体感觉下来还是很丝滑的,下面这篇文章主要给大家介绍了关于vite+element-plus项目基础搭建的全过程,需要的朋友可以参考下
2022-07-07
Vue组件为什么data必须是一个函数
这篇文章主要介绍了Vue组件为什么data必须是一个函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue中实现点击空白区域关闭弹窗的两种方法
这篇文章主要介绍了vue中实现点击空白区域关闭弹窗的两种方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
vue项目中使用多选框的实例代码
这篇文章主要介绍了vue项目中使用多选框的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-07-07
Vue实现简单计算器
这篇文章主要为大家详细介绍了Vue实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01