Commitef26448

committed

fix: proper v-model for tab-view

1 parent2ddd253 commitef26448Copy full SHA for ef26448

File tree

+30

-25

lines changed

platform/nativescript
- compiler/directives
  - model.js
- runtime/components
  - tab-view.js
samples/app
- app-with-tab-view.js

+30

-25

lines changed

Lines changed: 1 addition & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,10 +2,8 @@ import { addHandler, addAttr } from 'compiler/helpers'`
`2`	`2`	`import{genComponentModel,genAssignmentCode}from'compiler/directives/model'`
`3`	`3`	`import{getViewMeta}from'../../element-registry'`
`4`	`4`
`5`		`-constvalueTypes=['text','value','checked','date','selectedIndex','time']`
`6`		`-`
`7`	`5`	`exportdefaultfunctionmodel(el,dir,_warn){`
`8`		`-if(el.type===1){`
	`6`	`+if(el.type===1&&el.plain){`
`9`	`7`	`genDefaultModel(el,dir.value,dir.modifiers)`
`10`	`8`	`}else{`
`11`	`9`	`genComponentModel(el,dir.value,dir.modifiers)`

Lines changed: 23 additions & 18 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,32 +1,37 @@`
`1`	`1`	`exportdefault{`
`2`	`2`	`name:'tab-view',`
`3`	`3`
`4`		`-props:['selectedTab'],`
`5`		`-`
`6`		-template:`
`7`		`- <native-tab-view ref="tabView" v-model="selectedIndex">`
`8`		`- <slot></slot>`
`9`		`- </native-tab-view>`
`10`		- `,
	`4`	`+model:{`
	`5`	`+prop:'tab',`
	`6`	`+event:'tabChange'`
	`7`	`+},`
`11`	`8`
`12`		`-data(){`
`13`		`-return{`
`14`		`-selectedIndex:0`
	`9`	`+props:{`
	`10`	`+tab:{`
	`11`	`+type:Number,`
	`12`	`+default:0`
`15`	`13`	`}`
`16`	`14`	`},`
`17`	`15`
`18`		`-watch:{`
`19`		`-selectedTab(index){`
`20`		`-this.selectedIndex=index`
`21`		`-},`
`22`		`-selectedIndex(index){`
`23`		`-this.$emit('tabChange',index)`
`24`		`-}`
	`16`	`+render(h){`
	`17`	`+returnh(`
	`18`	`+'native-tab-view',`
	`19`	`+{`
	`20`	`+ref:'tabView',`
	`21`	`+on:{`
	`22`	`+selectedIndexChange:({ value})=>this.$emit('tabChange',value)`
	`23`	`+},`
	`24`	`+attrs:{`
	`25`	`+selectedIndex:this.$props.tab`
	`26`	`+}`
	`27`	`+},`
	`28`	`+this.$slots.default`
	`29`	`+)`
`25`	`30`	`},`
`26`	`31`
`27`	`32`	`methods:{`
`28`	`33`	`registerTab(tabView){`
`29`		`-letitems=this.$refs.tabView.nativeView.items\|\|[]`
	`34`	`+constitems=this.$refs.tabView.nativeView.items\|\|[]`
`30`	`35`
`31`	`36`	`this.$refs.tabView.setAttribute('items',items.concat([tabView]))`
`32`	`37`	`}`

Lines changed: 6 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,8 @@`
`1`	`1`	`constVue=require('./nativescript-vue')`
`2`		`-`
	`2`	`+Vue.config.debug=true`
`3`	`3`	`letapp=newVue({`
`4`	`4`	`data:{`
`5`		`-selectedTab:0,`
	`5`	`+activeTab:1,`
`6`	`6`	`tabs:[`
`7`	`7`	`{title:'First Tab',text:'im the first tab'},`
`8`	`8`	`{title:'Second Tab',text:'im the second tab'},`
`@@ -24,9 +24,11 @@ let app = new Vue({`
`24`	`24`	`</stack-layout>`
`25`	`25`	`</action-bar>`
`26`	`26`	`<stack-layout>`
	`27`	`+ <Label :text="activeTab"/>`
`27`	`28`	`<button @tap="tabs.push({title: 'added', text: 'added tab'})">Click me!</button>`
`28`		`- <tab-view :selectedIndex="selectedTab">`
`29`		`- <tab-view-item v-for="(tab, i) in tabs" key="i" :title="tab.title">`
	`29`	`+ <button @tap="activeTab = tabs.length - 1">Go to last!</button>`
	`30`	`+ <tab-view v-model="activeTab">`
	`31`	`+ <tab-view-item v-for="(tab, i) in tabs" :key="i + tab.title" :title="tab.title">`
`30`	`32`	`<label>{{ tab.text }}</label>`
`31`	`33`	`</tab-view-item>`
`32`	`34`	`</tab-view>`

Comments

(0)