fix(Tabs): incorrect change event in some cases (#7461)

src/tab/test/__snapshots__/index.spec.js.snap

@@ -315,10 +315,10 @@ exports[`swipe to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
-      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
       <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
-      <div class="van-tabs__line"></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -335,10 +335,10 @@ exports[`swipe to switch tab 3`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
-      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
       <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
-      <div class="van-tabs__line"></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
   <div class="van-tabs__content">

src/tab/test/index.spec.js

@@ -61,12 +61,17 @@ test('swipe to switch tab', async () => {
   const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <van-tabs swipeable @change="onChange">
+      <van-tabs v-model="active" swipeable @change="onChange">
         <van-tab title="title1">Text</van-tab>
         <van-tab title="title2">Text</van-tab>
         <van-tab title="title3" disabled>Text</van-tab>
       </van-tabs>
     `,
+    data() {
+      return {
+        active: 0,
+      };
+    },
     methods: {
       onChange,
     },
@@ -174,7 +179,7 @@ test('name prop', async () => {
 
   const wrapper = mount({
     template: `
-      <van-tabs @click="onClick" @disabled="onDisabled" @change="onChange">
+      <van-tabs v-model="active" @click="onClick" @disabled="onDisabled" @change="onChange">
         <van-tab title="title1" name="a">Text</van-tab>
         <van-tab title="title2" name="b">Text</van-tab>
         <van-tab title="title3" name="c" disabled>Text</van-tab>
@@ -185,6 +190,11 @@ test('name prop', async () => {
       onChange,
       onDisabled,
     },
+    data() {
+      return {
+        active: 0,
+      };
+    },
   });
 
   await later();

src/tab/test/insert.spec.js

@@ -27,9 +27,10 @@ test('insert tab dynamically', async () => {
 });
 
 test('insert tab with name dynamically', async () => {
+  const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <van-tabs v-model="active">
+      <van-tabs v-model="active" @change="onChange">
         <van-tab v-if="insert" title="1" name="bar">2</van-tab>
         <van-tab title="2" name="foo">1</van-tab>
       </van-tabs>
@@ -37,14 +38,18 @@ test('insert tab with name dynamically', async () => {
     data() {
       return {
         insert: false,
-        active: [{ name: 'foo', title: 'foo' }],
+        active: 'foo',
       };
     },
+    methods: {
+      onChange,
+    },
   });
 
   await later();
   wrapper.setData({ insert: true });
   expect(wrapper).toMatchSnapshot();
+  expect(onChange).toHaveBeenCalledTimes(0);
 });
 
 // this case will throw wierd error in index.spec.js

src/tabs/index.js

@@ -240,19 +240,23 @@ export default createComponent({
     },
 
     setCurrentIndex(currentIndex) {
-      currentIndex = this.findAvailableTab(currentIndex);
+      const newIndex = this.findAvailableTab(currentIndex);
 
-      if (isDef(currentIndex) && currentIndex !== this.currentIndex) {
+      if (!isDef(newIndex)) {
-        const shouldEmitChange = this.currentIndex !== null;
+        return;
-        this.currentIndex = currentIndex;
+      }
-        this.$emit('input', this.currentName);
+
+      const newTab = this.children[newIndex];
+      const newName = newTab.computedName;
+      const shouldEmitChange = this.currentIndex !== null;
+
+      this.currentIndex = newIndex;
+
+      if (newName !== this.active) {
+        this.$emit('input', newName);
 
         if (shouldEmitChange) {
-          this.$emit(
+          this.$emit('change', newName, newTab.title);
-            'change',
-            this.currentName,
-            this.children[currentIndex].title
-          );
         }
       }
     },