Vue使用问题解决记录(持续更新)

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')
}
})