• 利用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(',');
        }
    })
  • 相关阅读:
    redis 内存管理与数据淘汰机制(转载)
    Memcached特性及优缺点
    二叉树深度优先遍历和广度优先遍历
    电商 秒杀系统 设计思路和实现方法(转载)
    6种负载均衡算法
    解决like '%字符串%'时索引不被使用的方法
    哪些情况下索引会失效?
    PreferenceActivity详解
    sun.misc.BASE64Encoder在Eclipse中不能直接使用的原因和解决方案
    单点登录原理与简单实现
  • 原文地址:https://www.cnblogs.com/xhliang/p/8964370.html
Copyright © 2020-2023  润新知