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: '<select>' +
'<slot></slot>' +
'</select>',
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')
}
})
