利用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(',');
    }
})