Vue数据回显表单无法编辑的解决方案

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

Vue数据回显表单无法编辑的解决方案

鲨鱼唖   2022-11-24 我要评论

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)
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们