关于Vue响应式,ui组件绑定值是对象的属性时的坑

148

比如:

<input v-model="obj.a"/>

data(){        
    return { 
       obj:{} 
    }   
}

如果在ui渲染完之后,obj对象里面根本没有a属性,那么input组件绑定的obj.a就并非是响应式的。也就是说用户输入了‘XXX‘,那么obj不会出现a属性且a:'XXX'。

对于公司用的二次封装的组件更明显,比如基于Eui二次开发的Cui。

对于组件cui-select选择器,其需要绑定的v-model是一个数组,

我们给他绑定 :

<cui-select v-model="obj.arr"/>

data(){        
    return { 
       obj:{} 
    }   
}

渲染ui时,obj是不存在arr属性的,也就是obj.arr = undefined。

当我们在界面上操作cui-select时,其功能会错乱,并且不会响应到obj.arr上。

解决方法

直接在界面渲染之前,将ui绑定的对象的属性进行初始化即可,例如:

<cui-select v-model="obj.arr"/>

data(){        
    return { 
       obj:{
            arr:[]
        } 
    }   
}