touchMove event error!

[jiayechao]

中文用户注意：

1. 尽量用英文描述你的 Issue，你的问题是面向世界的
2. 不要把内容堆彻在标题上，逻辑清晰地写在内容区
3. 贴代码要提前格式化好，有颜色高亮那种，贴文本，不要贴图片
4. 提问题前，务必仔细阅读 README.md；在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决

BUG REPORT TEMPLATE

<template>
   <div>
    <swiper
      :options="swiperOption"
      ref="mySwiper2"
      @touchMove="moveThrottle">
      <swiper-slide class="tab-content bg-gray">I'm Slide 1</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 2</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 3</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 4</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 5</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 6</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 7</swiper-slide>
    </swiper>
</div>
</template>

<script>
import 'swiper/css/swiper.css'
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'

export default {
  name: 'home-tab',
  data() {
    return {      
      tabLeft: 0, // 导航条移动距离
      swiper1: {},
      swiper2: {},
      swiperOption: {
        watchSlidesProgress: true,
        resistanceRatio: 0
      }
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  mounted() {
    this.swiper2 = this.$refs.mySwiper2.$swiper
  },
  methods: {
    moveThrottle() {
      const progress = this.swiper2.progress
      this.tabLeft = this.navSum * progress
      console.log(progress, this.navSum, this.tabLeft)
    },
  }
}
</script>

Vue.js version and component version

vue: 2.6.7 swiper:5.4.5 vue-awesome-swiper: 4.1.1

What is actually happening?

it works. but when i use {{tabLeft}} after swipercomponent , i cant get the right result, its shaking

<template>
   <div>
    <swiper
      :options="swiperOption"
      ref="mySwiper2"
      @touchMove="moveThrottle">
      <swiper-slide class="tab-content bg-gray">I'm Slide 1</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 2</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 3</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 4</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 5</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 6</swiper-slide>
      <swiper-slide class="tab-content bg-gray">I'm Slide 7</swiper-slide>
    </swiper>
    {{tabLeft}}
</div>
</template>

[ygj6]

@jiayechao

  methods: {
    moveThrottle () {
      const progress = this.swiper2.progress
      this.tabLeft = this.navSum * progress
      console.log(progress, this.navSum, this.tabLeft)
    }
  }
}

this.navSum is undefined that cause you cannot get the correct result.