element-ui input 输入框赋值后,无法再输入的问题解决

问题

dialog弹出框里的form表单,打开后给输入选项赋值,改选项无法再输入。问题代码:

     
        
            
        
      
data() {
    return {
        formDialogVisible: false,
	    form: {}
    }
  },
  methods: {
    /**
     * 新建&&修改
     */
    showAdd() {
      this.formDialogVisible = true
      this.$nextTick(()=>{
        this.form.bizPartyCode = 'value'
      })
    }
  }

原因分析

初始值form的属性没有定义,后续直接给form添加属性并赋值,vue没有监听到form值变化,输入选项就没有重新渲染,所以出现无法输入(实际已赋值)。

解决方法

方法一、在form初始值中定义好属性

data() {
    return {
        formDialogVisible: false,
	    form: {
            bizPartyCode: ''
        }
    }
  },
  methods: {
    /**
     * 新建&&修改
     */
    showAdd() {
      this.formDialogVisible = true
      this.$nextTick(()=>{
        this.form.bizPartyCode = 'value'
      })
    }
  }

方法二:使用vue的$set()方法

vue官方文档:对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

data() {
    return {
        formDialogVisible: false,
	    form: {}
    }
  },
  methods: {
    /**
     * 新建&&修改
     */
    showAdd() {
      this.formDialogVisible = true
      this.$nextTick(()=>{
        this.$set(this.form, 'bizPartyCode', 'value')
      })
    }
  }

问题解决。

你可能感兴趣的:(vue.js,elementui,javascript)