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