When using vue to write filter, pay attention when the incoming is an object

When writing a filter in vue or angular, you must pay attention when the object is passed in. You cannot directly change the value of the object, because on the page that uses the filter, if other values ​​of the passed in object change, the filter will also be re-run, so An error may be reported, the following example will generate an undefined object value

The following example uses vue vant, arrtoArr is to display the format of ['0','2']---->'question 1, question 3' on the page

page

           <div v-for="item,index in list" v-if="list.length!=0">
                    {{item.parstr | filtertest}}:{{item.pararr | arrtoArr}}        //The change of the count value of the item object will also trigger the change of the two filters
                    <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 and methods corresponding to the page

data:{
     return {
          list:[
            {
                parsrt:1,
                stop:['2','1'],
                desc:'',
                count:0
            },
            {
                parstr:2,
                stop:['1','4','5'],
                desc:'',
                count:0
            }
           ]
     }      
} ,
methods:{
      updateCount(oprt,index){
            if(oprt=='reduce'){
                if(this.serviceList[index].count<=1){
                    this.$dialog.confirm({
                        title: 'Warning',
                        message: 'Confirm to delete?'
                    }).then(() => {
                         this.serviceList.splice(index,1);
                    }).catch(() => {
                    });
                }else{
                    this.serviceList[index].count--; // Be sure to note that the count of an object inside the serviceList has changed, and the two filters on the above page will re-run
                }
            }else{
                this.serviceList[index].count++;
            }
        }

}    

　　

filter.js

View.filter('arrtoArr',function(par){
    var comparlist = {
        0: 'Question 1',
        1: 'Question 2',
        2: 'Question 3',
        3: 'Question 4',
        4: 'Question 5',
        5: 'Question 6',
        6: 'Question 7',
        7: 'Question 8',
        100: 'Question 9'
    }
    var arr = []
    if(par==undefined||par.length<1){
        return ''
    }else{
        for(var i=0;i<par.length;i++){
            var tt = par[i] // The value of the par parameter cannot be directly changed here
            arr.push(comparlist[tt])
        }
        return arr.join(',');
    }
})

　　

 

 

kdjfkd