利用vue写filter时 当传入是一个对象时注意
vue或angular 写filter时,传入的是对象时一定注意,不能直接改变对象的值,因为在使用该filter的页面上,若传入的对象其他值发生变化,该filter也会重新运行,这样可能会报错,如下例子会产生undefined的对象值
下面的例子是利用vue vant ,arrtoArr是将['0','2']---->'问题1,问题3'的格式在页面中显示
页面
<div v-for="item,index in list" v-if="list.length!=0">
{{item.parstr | filtertest}}:{{item.pararr | arrtoArr}} //item对象的count值变化也会触发两个filter的变化
<span class="count">
<span @click="updateCount('deduce',index)">
<i class="van-icon van-icon-reduce-o"></i>
</span>
{{item.count}}
<span @click="updateCount('add',index)">
<i class="van-icon van-icon-add-o"></i>
</span>
</span>
</div>
页面对应的数据和方法
data:{
return {
list:[
{
parsrt:1,
pararr:['2','1'],
desc:'',
count:0
},
{
parstr:2,
pararr:['1','4','5'],
desc:'',
count:0
}
]
}
} ,
methods:{
updateCount(oprt,index){
if(oprt=='reduce'){
if(this.serviceList[index].count<=1){
this.$dialog.confirm({
title: '警告',
message: '确认删除么'
}).then(() => {
this.serviceList.splice(index,1);
}).catch(() => {
});
}else{
this.serviceList[index].count--; //一定注意此处serviceList的内部的某一个对象的count变化了,上面页面的两个filter都会重新运行
}
}else{
this.serviceList[index].count++;
}
}
}
filter.js
Vue.filter('arrtoArr',function(par){
var comparlist = {
0:'问题1',
1:'问题2',
2:'问题3',
3:'问题4',
4:'问题5',
5:'问题6',
6:'问题7',
7:'问题8',
100:'问题9'
}
var arr = []
if(par==undefined||par.length<1){
return ''
}else{
for(var i=0;i<par.length;i++){
var tt = par[i] //此处不可直接改变其par参数的值
arr.push(comparlist[tt])
}
return arr.join(',');
}
})
浙公网安备 33010602011771号