背景:公司前端项目采用vue架构,期间遇到动态参数绑定时参数不能实时绑定的问题,特此纪要!
问题:vue动态参数绑定异常(双向绑定异常)如何处理?
说明:动态参数绑定异常指的是排除正常的语法错误的前提下发生的异常。
场景:在处理一个动态渲染的下拉框来联动触发其他dom的过程中发现参数不能够实时绑定。
解决:
1. vue有一个类似于jquery控件赋值的函数$set(),用他来进行封装赋值。
2. 基于上一步vue还有一个类似于事物提交赋值的函数$forceUpdate(),以动态绑定刚才实时获取赋值后的绑定参数。
下面是项目上一个简单的Demo处理,以供参考!
/** 组件渲染更新处理 */
changeLlogisticsSource() {
this.$set(this.carr, 'xxx1', false);
this.$set(this.carr, 'xxx2', false);
if (this.carr.logisticsSource == 10) {
this.$set(this.carr, 'xxx1', true); //处理
}
if (this.carr.logisticsSource == 20) {
this.$set(this.carr, 'xxx2', true);
}
this.$forceUpdate();
}
函数使用说明:
//this.$set(this.carr, 'xxx1', false);
1. this指代顶层父容器。
2. $set(container, attribute, value);
container:第一个参数指代的是你在设置处理的根容器。
attribute:第二个参数指代的是容器内设置的属性名称。(类似于一个key)
value:第三个参数指代的就是你要绑定的具体值。