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

Vue实现原理

vue2: Object.defineProperty
vue3:Proxy
虚拟DOM