1 this属性调用无效
this在methods中的方法表面调用,表明调用的是当前vue对象.
但在方法内部的方法中调用时,所指便不再是vue对象,可能式窗口本身. 此时建议,在methods中的方法开始时写:var that=this;//或者var self=this;
此后内部调用that即可.
2 打印vue中的对象时,属性对应一堆方法,无法查看具体值
如某vue对象中的data有一个名为mainData的对象,利用对象克隆,即可查看到此时(!)该对象对应的值.
写法:console.log(JSON.parse(JSON.stringify(mainData)));
3.设置数组中的某个索引值或对象中的某个属性值时,变化无效
该问题也是新手经常遇到的问题,具体原因不表,此处只说办法.
this.arrData[0]='123';this.mData.name='yys';//以上写法均不会生效,应改为以下的写法Vue.set(this.arrData,0,'123');Vue.set(this.mData,'name','yys');
4.watch对象,内部属性值改变后不触发watch方法
也是常见问题之一,如:
watch:{ mData:function(newVal,oldVal){ //当内部属性name变更时,默认情况不会触发该方法 console.log(newVal); }} 改为以下写法即可:
watch:{ mData:{ handler:function(nv,ov){ //可触发 console.log(nv); }, //核心所在 deep:true }}, 5.有时将对象集合的某属性值设为空值(空字符串),每个对象的表现都一样(显示相同的值)
该问题,推测是vue的确认机制造成的,建议对于明确有意义的值,不要设定为空字符串;
如我常将数字组成的默认值设为0或-1,而将字符串构成的默认值设为'--';6.对于插件类组成的新样式,不知道怎么用vue
以select2为例,可以使用组件的方式实现(参考yys写的插件),具体就不展开了.
大体原则是,利用插件本身的api.7.watch对象时,新旧值相同的问题
在问题4中,如果监听的是一个对象或数组,设置deep:true,每次值变更的时候会触发方法,但新值和旧值总是一样的.具体原因此处不再解释(简单的说,可根据指针理解),仅提出解决方案:
譬如说,监听的是vue中名为mainData的对象.- 此时需要创建一个记录mainData的旧值;
- 在每次监听函数开始时,把oldMainData当做旧值;
- 而在监听函数结束时,将mainData的值克隆给oldMainData即可.
var vueMain=new Vue({ el:'#main_zone', data:{ mainData:{}, oldMainData:{} }, watch:{ //此监听函数中,第二个参数(旧值)总和第一个参数相同,所以没有调用必要 mainData:function(nv){ var ov=this.oldMainData; if(nv.count!==ov.count||nv.price!==ov.price){ if(!isNaN(nv.price)&&!isNaN(nv.count)){ nv.money=nv.price*nv.count; }else{ nv.money=''; } } //最后一步,必须将nv的值克隆给oldMainData this.oldMainData=JSON.parse(JSON.stringify(nv)); } }}); 8.有时选择完vue组成的select2,change时值已给定,但显示不改变的问题
给定一个具体的初始值,如常用的'--'或0.
9.监听vue组成的select2值改变
共计两种方法,目前来看第2种更好:
- 数据监听,具体参考7;
- 修改vue组成的select2插件,利用onChange属性(参考以下代码).
Vue.component('select2', { props: ['options', 'value','other_config','onChange','location'], template: '', mounted: function() { var vm = this; var config2={data:this.options}; //允许其他配置,如宽度 config2=Object.assign(config2,this.other_config); $(this.$el) // init select2 .select2(config2) .val(this.value) .trigger('change') // emit event on change. .on('change', function() { vm.$emit('input', this.value); if(vm.onChange){ //注:该方法会触发两次,且仅在第二次改变之后才会被触发(暂无更好方法) if(this.oldVal!==this.value){ this.oldVal2=this.oldVal; vm.onChange(this.value,this.oldVal2,vm.location); } this.oldVal=this.value; } }); }, watch: { value: function(value) { // update value //此处额外添加的适应事件 var vm = this; $(this.$el) .val(value) .trigger('change'); // .on('change', function() { // vm.$emit('input', this.value) // if(typeof vm.onChange!=='undefined'){ // vm.onChange(this.value); // } // }); }, options: function(options) { // update options var config2={data:options}; //允许其他配置 config2=Object.assign(config2,this.other_config); $(this.$el).empty().select2(config2); }, other_config:function(other_config){ var config2={data:this.options}; //允许其他配置 config2=Object.assign(config2,other_config); $(this.$el).empty().select2(config2); } }, destroyed: function() { $(this.$el).off().select2('destroy') }})