vant tab切换 循环一组数据

html

 <van-tabs @click="onClick" v-model="active">
       <van-tab v-for="(tabItem,index) in tabTitle" :title="tabItem.title">
             <div v-if="tabItem.value === 0 || tabItem.value === 1 || tabItem.value === 2">
                   <van-cell-group v-for="(item,index) in newData">
                        {{item.name}}
                  </van-cell-group>
            </div>
      </van-tab>
</van-tabs>

data数据

      //tab切换数据
      tabTitle: [
            {title: '1', value: 0},
            {title: '2', value: 1},
            {title: '3', value: 2},
        ],
       active: 0,
       thisTitle: '',
       data: [
             {
                   type: '1',
                   meal: [
                        {id: '1',name: '1',},
                    ]
              },
       ],
      newData: [],

函数

      created() {//初始化tab选中名、第一页tab数据
            this.thisTitle = this.tabTitle[0].title;
            this.newData = this.data.filter(function (v) {
                return v.type === '1'
            })
        },
        methods: {
            onClick(name, title) {//切换tab
                if (name === 0) {
                    this.matchMeal(this.data, '早餐');
                    return false;
                } else if (name === 1) {
                    this.matchMeal(this.data, '午餐');
                    return false;
                } else if (name === 2) {
                    this.matchMeal(this.data, '晚餐');
                    return false;
                }
                this.thisTitle = title;
            },
            matchMeal(oArr, variable = '') {//过滤数据
                this.newData = oArr.filter((item) => {
                    if (item.type === variable) {
                        return item
                    }
                })
            },

        }
上一篇:vue+vant上拉加载


下一篇:vue ui框架