[Solved] The solution to the abnormal underline position of the tab bar in vant

1. Problem description

By using the tab bar in vant2 to introduce the vue project, the effect of switching can be achieved, but in the process of use, it is found that the underline of the tab bar is not aligned with the text, the effect is as follows As shown in the figure, the underline position and the pop are not aligned

2. Reasons

I used the v-show command in the component that renders this tab bar, which resulted in an error in the underline position

3. Solutions

Method 1. If it is allowed in the project, you can change v-show to v-if to solve this problem

Method 2: There is a resize redraw method on the tabs of the tab bar, you can call this to solve this problem

Code implementation of method 2:

//home.vue
<template>
    <tab :title="['Popular', 'New', 'Featured']" @clickIndex="getIndex" v-show="isShow"
        ref="tab2"></tab>
</template>

<script>
    export default{
        data(){
            // Here isShow is used to control the display and hiding of tab components
            isShow: false
        },
        // Monitor isShow changes to call the resize method on tabs
        watch: {
            isShow(val){
                this.$refs.tab2.resize()
            }
        }
    }
</script>

// tab component
<template>
  <div>
    <van-tabs v-model="active" ref="tab">
      <van-tab>1</van-tab>
      <van-tab>2</van-tab>
      <van-tab>3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    }
  },
  methods: {
    
    resize() {
      // There is a resize method on tabs, call this method to redraw to solve the problem of underline position
      this.$refs.tab.resize()
    }
  }
  
}
</script>

In my project, I used the second method to solve the problem, the effect is as follows