typescripe写级联表单时,级联修改和级联删除不生效
一、需求:
做三级级联,当修改高级级联表单是,子级联清空; 一级菜单用one代表,二级菜单用two代表;三级菜单three;
二、问题:
当清空一级表单one时,使用on-change调用方法中,对子级联表单数据赋成空字符串,如下: this.formbean.two = ‘’; 同理:因为二级表单发生了变化,会触发三级表单也改变,同理,this.formbean.three = ‘’;但是, 当清空一级表单时,二三级表单数据并没有清空。
三、解决办法: 对于赋空值使用this.formbean.two = ‘’;修改为下面的方式: Vue.set(this.formBean, ‘two’, ‘’);即可,参数1:为修改的对象;参数2:对象的具体属性名;参数3:为需要修改成的值。
四、原理: 因为受现代JS的限制,vue不能检测到对象属性的添加或删除。 由于vue会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在data对象上存在才能让vue转换它,这样它才能是响应的。
vue不允许在已经创建的实例上动态添加新的根级响应式属性,不过可以使用Vue.set()方法将响应式属性添加到嵌套的对象上。