fix: proper v-model for tab-view

rigor789 · rigor789 · commit ef264483df51 · 2017-12-23T14:21:27.000Z
fix nativescript-vue#50
diff --git a/platform/nativescript/compiler/directives/model.js b/platform/nativescript/compiler/directives/model.js
@@ -2,10 +2,8 @@ import { addHandler, addAttr } from 'compiler/helpers'
 import { genComponentModel, genAssignmentCode } from 'compiler/directives/model'
 import { getViewMeta } from '../../element-registry'
 
-const valueTypes = ['text', 'value', 'checked', 'date', 'selectedIndex', 'time']
-
 export default function model(el, dir, _warn) {
-  if (el.type === 1) {
+  if (el.type === 1 && el.plain) {
     genDefaultModel(el, dir.value, dir.modifiers)
   } else {
     genComponentModel(el, dir.value, dir.modifiers)
diff --git a/platform/nativescript/runtime/components/tab-view.js b/platform/nativescript/runtime/components/tab-view.js
@@ -1,32 +1,37 @@
 export default {
   name: 'tab-view',
 
-  props: ['selectedTab'],
-
-  template: `
-    <native-tab-view ref="tabView" v-model="selectedIndex">
-      <slot></slot>
-    </native-tab-view>
-  `,
+  model: {
+    prop: 'tab',
+    event: 'tabChange'
+  },
 
-  data() {
-    return {
-      selectedIndex: 0
+  props: {
+    tab: {
+      type: Number,
+      default: 0
     }
   },
 
-  watch: {
-    selectedTab(index) {
-      this.selectedIndex = index
-    },
-    selectedIndex(index) {
-      this.$emit('tabChange', index)
-    }
+  render(h) {
+    return h(
+      'native-tab-view',
+      {
+        ref: 'tabView',
+        on: {
+          selectedIndexChange: ({ value }) => this.$emit('tabChange', value)
+        },
+        attrs: {
+          selectedIndex: this.$props.tab
+        }
+      },
+      this.$slots.default
+    )
   },
 
   methods: {
     registerTab(tabView) {
-      let items = this.$refs.tabView.nativeView.items || []
+      const items = this.$refs.tabView.nativeView.items || []
 
       this.$refs.tabView.setAttribute('items', items.concat([tabView]))
     }
diff --git a/samples/app/app-with-tab-view.js b/samples/app/app-with-tab-view.js
@@ -1,8 +1,8 @@
 const Vue = require('./nativescript-vue')
-
+Vue.config.debug = true
 let app = new Vue({
   data: {
-    selectedTab: 0,
+    activeTab: 1,
     tabs: [
       { title: 'First Tab', text: 'im the first tab' },
       { title: 'Second Tab', text: 'im the second tab' },
@@ -24,9 +24,11 @@ let app = new Vue({
               </stack-layout>
             </action-bar>
             <stack-layout>
+                <Label :text="activeTab"/>
                 <button @tap="tabs.push({title: 'added', text: 'added tab'})">Click me!</button>
-                <tab-view :selectedIndex="selectedTab">
-                    <tab-view-item  v-for="(tab, i) in tabs" key="i" :title="tab.title">
+                <button @tap="activeTab = tabs.length - 1">Go to last!</button>
+                <tab-view v-model="activeTab">
+                    <tab-view-item v-for="(tab, i) in tabs" :key="i + tab.title" :title="tab.title">
                         <label>{{ tab.text }}</label>
                     </tab-view-item>
                 </tab-view>
