From 37a5c55ddb1a83fe4773ce9218aaa9bb9d838ae1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 27 Sep 2017 10:48:50 +0800
Subject: [PATCH 1/2] fix: tab's props not observable

---
 packages/checkbox/index.vue |  3 +--
 packages/tab/index.vue      | 40 ++++++++++++++++++++++++++-----------
 packages/tabs/index.vue     | 18 ++++++-----------
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index 9518db5ee..7f7e30cbe 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -84,8 +84,7 @@ export default {
     },
 
     isChecked() {
-      const currentValue = this.currentValue;
-      console.log('this.currentValue:', this.currentValue);
+      const { currentValue } = this;
       if ({}.toString.call(currentValue) === '[object Boolean]') {
         return currentValue;
       } else if (currentValue !== null && currentValue !== undefined) {
diff --git a/packages/tab/index.vue b/packages/tab/index.vue
index 232bd6b33..65933ef2e 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.vue
@@ -1,35 +1,51 @@
 <template>
-  <div class="van-tab__pane" :class="classNames">
+  <div :class="['van-tab__pane', { 'van-tab__pane--select': key === $parent.curActive }]">
     <slot></slot>
   </div>
 </template>
 
 <script>
+import findParent from '../mixins/findParent';
+
 export default {
   name: 'van-tab',
+
+  mixins: [findParent],
+
   props: {
-    // 选项卡头显示文字
     title: {
       type: String,
       required: true
     },
     disabled: Boolean
   },
-  data() {
-    const nextIndex = this.$parent.tabs.length;
-    this.$parent.tabs.push({
-      title: this.title,
-      disabled: this.disabled,
-      index: nextIndex
-    });
 
+  data() {
+    this.findParentByComponentName('van-tabs');
+    const nextIndex = this.parentGroup.tabs.length;
+    this.updateParentData(nextIndex);
     return {
       key: nextIndex
     };
   },
-  computed: {
-    classNames() {
-      return { 'van-tab__pane--select': this.key === this.$parent.curActive };
+
+  watch: {
+    title() {
+      this.updateParentData();
+    },
+    disabled() {
+      this.updateParentData();
+    }
+  },
+
+  methods: {
+    updateParentData(nextIndex) {
+      const index = arguments.length ? nextIndex : this.key;
+      this.parentGroup.tabs.splice(index, 1, {
+        title: this.title,
+        disabled: this.disabled,
+        index
+      });
     }
   }
 };
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index e1849b673..dcd27dd65 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -8,9 +8,9 @@
             v-for="(tab, index) in tabs"
             :key="index"
             class="van-tab van-hairline"
-            :class="{'van-tab--active': index === curActive}"
+            :class="{ 'van-tab--active': index === curActive }"
             ref="tabkey"
-            @click="handleTabClick(index, tab)"
+            @click="handleTabClick(index)"
           >
             {{ tab.title }}
           </div>
@@ -27,9 +27,9 @@
         v-for="(tab, index) in tabs"
         :key="index"
         class="van-tab van-hairline"
-        :class="{'van-tab--active': index === curActive}"
+        :class="{ 'van-tab--active': index === curActive }"
         ref="tabkey"
-        @click="handleTabClick(index, tab)"
+        @click="handleTabClick(index)"
       >
         {{ tab.title }}
       </div>
@@ -134,14 +134,8 @@
     },
 
     methods: {
-      /**
-       * tab点击事件
-       *
-       * @param {number} index tab在tabs中的索引
-       * @param {Object} el tab的vue实例
-       */
-      handleTabClick(index, el) {
-        if (el.disabled) {
+      handleTabClick(index) {
+        if (this.tabs[index].disabled) {
           this.$emit('disabled', index);
           return;
         }

From aaaf569759b181750921b88657329baa46a850bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 27 Sep 2017 11:05:33 +0800
Subject: [PATCH 2/2] Tab: add test cases

---
 test/unit/components/tabs.vue | 12 +++++++++++-
 test/unit/specs/tabs.spec.js  | 11 +++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/test/unit/components/tabs.vue b/test/unit/components/tabs.vue
index a63a15b0d..b2b06f815 100644
--- a/test/unit/components/tabs.vue
+++ b/test/unit/components/tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <van-tabs :active="active" :duration="duration" @click="handleTabClick" @disabled="handleTabDisabledClick">
-    <van-tab title="选项一">内容一</van-tab>
+    <van-tab :title="firstTabTitle" :disabled="firstTabDisabled">内容一</van-tab>
     <van-tab title="选项二">内容二</van-tab>
     <van-tab title="选项三" disabled>内容三</van-tab>
     <van-tab title="选项四">内容四</van-tab>
@@ -17,6 +17,16 @@ export default {
     'van-tabs': Tabs
   },
 
+  props: {
+    firstTabTitle: {
+      type: String,
+      default: '选项一'
+    },
+    firstTabDisabled: {
+      type: Boolean
+    }
+  },
+
   data() {
     return {
       active: 0,
diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js
index eb6252a12..3de9cf3f9 100644
--- a/test/unit/specs/tabs.spec.js
+++ b/test/unit/specs/tabs.spec.js
@@ -146,4 +146,15 @@ describe('Tabs', () => {
       done();
     }, 1200);
   });
+
+  it('watch tab props changes', (done) => {
+    wrapper = mount(TabsTestComponent);
+    wrapper.vm.firstTabTitle = '测试标题';
+    wrapper.vm.firstTabDisabled = true;
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('.van-tab')[0].text().replace(/\n|\s/g, '')).to.equal('测试标题');
+      done();
+    });
+  });
 });