记Vue + Element 中遇到的问题
无法为属性赋值,并且this失效的问题
这两天工作中认真编码的时候碰见一个bug,我想要动态渲染Element ui中的多选框,多选框的数据是从后台传过来的。这个时候问题就出现了: 明明传过来的数组类型的数据没有问题,而且js写的也没有问题,但是复选框就是加载不出来?这个问题折磨了我两天,直到今天我偶然写了一个Vue的消息提示框上去,想要把我的多选框中的数组数据弹出来,于是出现了下面一幕:
之后我就去查了下这个问题,不查不知道,一查吓一跳,*原来是后台返回数据时这里的this指向的就不再是Vue了,解决办法是重新定义this(var _this=this;)或者把this换成Vue的全局变量Vue.prototype就行了*
既然我原先的this有问题,那么我的属性无法赋值的bug解决办法自然是解决了:只要把this.属性的this换成我重新定义的_this就好了。
Checkbox双向绑定,默认选中遇到的问题
ruleForm.type是一个数组,数组中值的类型一定要跟:label绑定的值类型相同,否则不会双向绑定,也不会默认选中!
引入Vue.js和各个UI框架时出现的问题
这个问题也是很奇葩,对于我这个非专业前端人士来说算得上十分头痛的问题了(ps:可能是我技艺不精)
例如这个地方,我引入了vue和其他的一些js文件
那么问题来了,这是页面上显示的样式:
可以看到,vue.js压根没有起作用,我先是度娘然后是寻求高手帮助,折腾好一会都没有解决办法,最后我死马当活马医,把除了vue.js之外的所有js删除,结果死马就活了....
后来经过我的反复删除筛选,最后锁定到这个js文件:serviceGuideSimple.js,这个文件是初始化vue模块的,把js文件放到底部注册就好了。
虽然不知道为什么会这样,但根据我的经验和猜测,我觉得这个初始化vue模块的js文件是不能放在网页头部加载的,就先这样总结吧,以后有了答案再做详细记录。
正是因为这次的踩坑,所以我打算在之后的编码中将所有的js文件引用都放在页面底部。
2 条评论
这篇文章如同一幅色彩斑斓的画卷,每一笔都充满了独特的创意。
对权力结构的解构充满勇气与智慧。