Merge pull request #148 from chenjiahan/dev

fix: tab's props not observable

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) {

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
+      });
     }
   }
 };

packages/tabs/index.vue

@@ -10,7 +10,7 @@
             class="van-tab van-hairline"
             :class="{ 'van-tab--active': index === curActive }"
             ref="tabkey"
-            @click="handleTabClick(index, tab)"
+            @click="handleTabClick(index)"
           >
             {{ tab.title }}
           </div>
@@ -29,7 +29,7 @@
         class="van-tab van-hairline"
         :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;
         }

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,

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();
+    });
+  });
 });