From 67a5a8d76cf5ab3582b91b48431fee9466e61597 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 26 May 2020 19:44:59 +0800
Subject: [PATCH] fix(Sidebar): should emit change when v-model changed (#6383)

---
 src/sidebar-item/index.js          |  2 +-
 src/sidebar/index.js               | 21 +++++++++++++++++++++
 src/sidebar/test/index.spec.js     | 14 ++++++++++----
 src/tree-select/test/index.spec.js | 10 +++++++---
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js
index 863a1fb5b..41a64767b 100644
--- a/src/sidebar-item/index.js
+++ b/src/sidebar-item/index.js
@@ -31,7 +31,7 @@ export default createComponent({
 
       this.$emit('click', this.index);
       this.parent.$emit('input', this.index);
-      this.parent.$emit('change', this.index);
+      this.parent.setIndex(this.index);
       route(this.$router, this);
     },
   },
diff --git a/src/sidebar/index.js b/src/sidebar/index.js
index dad186e5b..2485dac6e 100644
--- a/src/sidebar/index.js
+++ b/src/sidebar/index.js
@@ -17,6 +17,27 @@ export default createComponent({
     },
   },
 
+  data() {
+    return {
+      index: +this.activeKey,
+    };
+  },
+
+  watch: {
+    activeKey() {
+      this.setIndex(+this.activeKey);
+    },
+  },
+
+  methods: {
+    setIndex(index) {
+      if (index !== this.index) {
+        this.index = index;
+        this.$emit('change', index);
+      }
+    },
+  },
+
   render() {
     return <div class={bem()}>{this.slots()}</div>;
   },
diff --git a/src/sidebar/test/index.spec.js b/src/sidebar/test/index.spec.js
index 508eba73f..a3e533410 100644
--- a/src/sidebar/test/index.spec.js
+++ b/src/sidebar/test/index.spec.js
@@ -7,6 +7,7 @@ test('click event & change event', () => {
   const wrapper = mount({
     template: `
       <van-sidebar @change="onChange">
+        <van-sidebar-item>Text</van-sidebar-item>
         <van-sidebar-item @click="onClick">Text</van-sidebar-item>
       </van-sidebar>
     `,
@@ -16,16 +17,17 @@ test('click event & change event', () => {
     },
   });
 
-  wrapper.find('.van-sidebar-item').trigger('click');
-  expect(onClick).toHaveBeenCalledWith(0);
-  expect(onChange).toHaveBeenCalledWith(0);
+  wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
+  expect(onClick).toHaveBeenCalledWith(1);
+  expect(onChange).toHaveBeenCalledWith(1);
   wrapper.vm.$destroy();
 });
 
 test('v-model', () => {
+  const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <van-sidebar v-model="active">
+      <van-sidebar v-model="active" @change="onChange">
         <van-sidebar-item>Text</van-sidebar-item>
         <van-sidebar-item>Text</van-sidebar-item>
       </van-sidebar>
@@ -35,10 +37,14 @@ test('v-model', () => {
         active: 0,
       };
     },
+    methods: {
+      onChange,
+    },
   });
 
   wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
   expect(wrapper.vm.active).toEqual(1);
+  expect(onChange).toHaveBeenCalledWith(1);
 });
 
 test('disabled prop', () => {
diff --git a/src/tree-select/test/index.spec.js b/src/tree-select/test/index.spec.js
index 39b66c092..8314203ab 100644
--- a/src/tree-select/test/index.spec.js
+++ b/src/tree-select/test/index.spec.js
@@ -20,6 +20,10 @@ const mockItems = [
     text: 'group1',
     children: [mockItem],
   },
+  {
+    text: 'group2',
+    children: [mockItem],
+  },
 ];
 
 test('click-nav event', () => {
@@ -39,10 +43,10 @@ test('click-nav event', () => {
   });
 
   const navItems = wrapper.findAll('.van-tree-select__nav-item');
-  navItems.at(0).trigger('click');
+  navItems.at(1).trigger('click');
 
-  expect(onNavClick).toHaveBeenCalledWith(0);
-  expect(onClickNav).toHaveBeenCalledWith(0);
+  expect(onNavClick).toHaveBeenCalledWith(1);
+  expect(onClickNav).toHaveBeenCalledWith(1);
 });
 
 test('click-item event', () => {