vue input 无法编辑,vue computed 赋值
这篇文章主要介绍了某视频剪辑软件中投入被赋值后，无法再修改编辑的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
输入被赋值后，无法再修改编辑我们直入主题方法一方法二某视频剪辑软件综合问题归纳投入框赋值后不能进行编辑项目场景问题描述原因分析解决方案
input被赋值后，无法再修改编辑
我们直入主题
上面是我司的业务逻辑图，使用elementui框架，如图，请求数据赋值后，不仅有检测报错信息，而且还有无法修改编辑的问题。
起初以为是我的设置的对象问题，困扰我许久。
后来，翻阅了大佬的文章才了解。
El-form ref= form inline :inline= true :rules= rules :model= form inline label-position= right size= medium
El-表单-项目标签=SIM卡号" icsim "
El-输入v型。number= form inline。icsim maxlength= 18 /
/El-表单-项目
埃尔表单项目标签=ICCID码prop=iccid
El-input v-model= form inline。ICC id /
/El-表单-项目
El-表单-项目标签=激活时间prop=开始
最小行的El-date-picker v-model=。start value-format= yyyy-MM-DD HH:MM:ss style= width:200 px placeholder=选择日期/
/El-表单-项目
El-表单-项目标签=服务到期时间prop=end
最小行的El-date-picker v-model=。end value-format= yyyy-MM-DD HH:MM:ss style= width:200 px placeholder=选择日期/
/El-表单-项目
/el格式
导出默认值{
名称： formInline ，
data () {
返回{
对于在线：{}
}
},
方法：{
//vue请求数据
异步getSimData(参数){
const RES=await simInfoByVid(params)
const { sid，iccid，start，end，storage，icsim，vid }=res.data
this.formInline.sid=sid
this.formInline.iccid=iccid
this.formInline.start=start
this.formInline.end=end
this.formInline.storage=存储
this.formInline.icsim=icsim
this.formInline.vid=vid
}
}
}
上面的代码是我第一次写的代码，使用上面的方法，导致投入框或者日期选择框无法再编辑。
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
根据大佬的文章，总结了两个办法：
方法一
由此某视频剪辑软件实例创建时，形成一条线的属性名并未声明，因此某视频剪辑软件就无法对属性执行getter/setter转化过程，导致福尔马林线属性不是响应式的，因此无法触发视图更新。
解决的方式有两种，第一种就是显示的声明福尔马林线这个对象的属性，如：
data () {
返回{
对于在线：{
希德： ,
iccid: ，
开始： ,
结束： ,
存储： ,
icsim: ，
视频：""
}
}
方法二
使用某视频剪辑软件的全局API: $set()赋值：
异步getSimData(参数){
const RES=await simInfoByVid(params)
const { sid，iccid，start，end，storage，icsim，vid }=res.data
这个. set(this.formInline， sid ，sid)
这个. set(this.formInline， iccid ，iccid)
这个. set(this.formInline， start ，start)
这个. set(this.formInline， end ，end)
这个. set(this.formInline，存储，存储)
这个. set(this.formInline， icsim ，icsim)
}
vue综合问题归纳input框赋值后不能进行编辑
项目场景
项目场景：前端实现查看编辑功能的时候会出现，输入框赋值后投入框不能进行编辑，编辑之后自动取消，验证无法进行取消
问题描述
数据代码：
el-textarea
v-model=drawerForm.msg
占位符=请输入功能描述
:rows=3
allowClear
/el-textarea
js:
导出默认值{
名称： drawerForm ，
data () {
返回{
抽奖表演：{ }
}
},
方法：{
handleEditHelloForm () {
//模拟编辑功能需要数据回显
This.helloForm.msg=您好我是drawerForm中的msg值
}
}
}
原因分析
在空输入框被赋值后，没有setter和getter方法，这使得双向绑定不可能。创建这个Vue实例时，drawerForm的名称。属性未声明，因此Vue无法对该属性执行getter/setter转换过程，导致drawerForm属性没有响应，因此无法触发视图更新。
解决方案
第一个是显示的drawerForm对象的属性声明，例如：
data () {
返回{
draw perform:{
邮件：“”
}
}
},
用vue的全局方法：这个。$set(数据，属性，值)
Data是要修改的对象，property是要添加的属性，value是该属性的值，handleEditHelloForm () {
//模拟编辑功能需要数据回显。
Vue.set (this.helloform， msg ，你好我是drawerForm中的msg )
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。