vue给对象添加属性，无法与视图响应（已解决）

一、问题：vue中，给data中的某个对象添加属性，无法与页面响应

二、错误写法：

data() {
  return {
  	handle_form: {},
  }
}

// 对于对象本身没有的属性，使用普通 "." 的方法添加属性并赋值，无法与页面响应
this.handle_form.ruleName = ‘123’ 

三、解决方法：

• 方法一：直接在对象中写上属性

data() {
    return {
      	  handle_form: {   
     		  ruleName: ''
     	  },
    }
}

// 对于对象本身拥有的属性，使用普通 "." 的方法赋值，可以与页面响应
this.handle_form.ruleName = ‘123’ 

• 方法二：通过$set赋值

data() {
    return {
		handle_form: {},
    }
}

// 对于对象本身没有的属性，通过$set添加属性并赋值，可以与页面响应
this.$set(this.handle_form, 'ruleName', ‘123’)