天天看点

Vue中input被赋值后,无法再修改编辑的问题及解决

​项目场景:前端实现查看编辑功能的时候会出现, input框赋值后input框不能进行编辑,编辑之后自动取消,验证无法进行取消

Vue中input被赋值后,无法再修改编辑的问题及解决

​​​​​

问题描述:

数据代码:

<el-textarea
                  v-model="drawerForm.msg"
                  placeholder="请输入功能描述"
                  :rows="3"
                  allowClear
                ></el-textarea>      

js:

export default {
  name: 'drawerForm',
  data () {
    return {
      drawerForm: {}
    }
  },
  methods: {
    handleEditHelloForm () {
        // 模拟编辑功能需要数据回显
        this.helloForm.msg = 'hello 我是drawerForm中的msg值'
    }
  }
}      

原因分析

  • 空input框进行赋值后,不存在setter和getter方法,导致无法实现双向绑定
  • 由此Vue实例创建时,drawerForm.属性名并未声明,因此Vue就无法对属性执行 getter/setter 转化过程,导致drawerForm属性不是响应式的,因此无法触发视图更新。

解决方案:

使用vue的全局方法: this.$set(data, property, value)