zoukankan      html  css  js  c++  java
  • 利用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(',');
        }
    })
  • 相关阅读:
    8行代码批量下载GitHub上的图片
    python经典面试算法题1.1:如何实现链表的逆序
    pandas处理excel的常用方法技巧(上)
    numpy---python数据分析
    python、C++经典算法题:打印100以内的素数
    Java中数组、集合、链表、队列的数据结构和优缺点和他们之间的区别
    Hystrix
    Java中的static关键字解析
    Spring Boot
    Springcloud和Dubbo的区别。Eureka和Ribbon和Hystrix和zuul
  • 原文地址:https://www.cnblogs.com/xhliang/p/8964370.html
Copyright © 2011-2022 走看看