• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

凉梁凉糕

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

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

posted on 2018-04-27 20:46  凉梁凉糕  阅读(2134)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3