这篇文章主要介绍了Vue中input被赋值后,无法再修改编辑的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
方法一
由此Vue实例创建时,formInline的属性名并未声明,因此Vue就无法对属性执行 getter/setter 转化过程,导致formInline属性不是响应式的,因此无法触发视图更新。
解决的方式有两种,第一种就是显示的声明formInline这个对象的属性,如:
data () {
return {
formInline: {
sid: '',
iccid: '',
start: '',
end: '',
storage: '',
icsim: '',
vid: ''
}
}
方法二
使用Vue的全局API: $set()赋值:
async getSimData(params) {
const res = await simInfoByVid(params)
const { sid, iccid, start, end, storage, icsim, vid } = res.data
this.$set(this.formInline, 'sid', sid)
this.$set(this.formInline, 'iccid', iccid)
this.$set(this.formInline, 'start', start)
this.$set(this.formInline, 'end', end)
this.$set(this.formInline, 'storage', storage)
this.$set(this.formInline, 'icsim', icsim)
}