fix: v-if/v-else-if/v-else and v-model updating the wrong model

fixes #644, #569, #402, #405

Author: rigor789

platform/nativescript/compiler/directives/model.js

@@ -1,27 +1,35 @@
 import { genComponentModel, genAssignmentCode } from 'compiler/directives/model'
 import { isKnownView, getViewMeta } from '../../element-registry'
-import { addHandler, addAttr } from 'compiler/helpers'
 
 export default function model(el, dir) {
   if (el.type === 1 && isKnownView(el.tag)) {
-    genDefaultModel(el, dir.value, dir.modifiers)
+    genViewComponentModel(el, dir.value, dir.modifiers)
   } else {
     genComponentModel(el, dir.value, dir.modifiers)
   }
 }
 
-function genDefaultModel(el, value, modifiers) {
-  const { trim, number } = modifiers || {}
-  const { prop, event } = getViewMeta(el.tag).model
-
-  let valueExpression = `$event.value${trim ? '.trim()' : ''}`
+function genViewComponentModel(el, value, modifiers) {
+  debugger
+  const { number, trim } = modifiers || {}
+  const { prop } = getViewMeta(el.tag).model
 
+  const baseValueExpression = '$event'
+  let valueExpression = `${baseValueExpression}.object[${JSON.stringify(prop)}]`
+  if (trim) {
+    valueExpression =
+      `(typeof ${valueExpression} === 'string'` +
+      `? ${valueExpression}.trim()` +
+      `: ${valueExpression})`
+  }
   if (number) {
     valueExpression = `_n(${valueExpression})`
   }
+  const assignment = genAssignmentCode(value, valueExpression)
 
-  const code = genAssignmentCode(value, valueExpression)
-
-  addAttr(el, prop, `(${value})`)
-  addHandler(el, event, code, null, true)
+  el.model = {
+    value: `(${value})`,
+    expression: JSON.stringify(value),
+    callback: `function (${baseValueExpression}) {debugger;${assignment}}`
+  }
 }

platform/nativescript/runtime/modules/events.js

@@ -31,6 +31,7 @@ function updateDOMListeners(oldVnode, vnode) {
   const oldOn = oldVnode.data.on || {}
   target = vnode.elm
   updateListeners(on, oldOn, add, remove, vnode.context)
+  target = undefined
 }
 
 export default {

platform/nativescript/runtime/modules/index.js

@@ -4,4 +4,4 @@ import events from './events'
 import style from './style'
 import transition from './transition'
 
-export default [attrs, class_, events, style, transition]
+export default [class_, events, attrs, style, transition]

samples/app/569.js

@@ -0,0 +1,46 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+// console.log(Vue.compile('<Switch v-model="arrival" color="red"/>').render.toString())
+
+new Vue({
+  data() {
+    return {
+      items: [
+        { switch: false, value: 'Item 1' },
+        { switch: false, value: 'Item 2' },
+        { switch: false, value: 'Item 3' },
+        { switch: false, value: 'Item 4' },
+        { switch: false, value: 'Item 5' },
+        { switch: false, value: 'Item 6' },
+        { switch: false, value: 'Item 7' },
+        { switch: false, value: 'Item 8' },
+        { switch: false, value: 'Item 9' },
+        { switch: false, value: 'Item 10' },
+        { switch: false, value: 'Item 11' },
+        { switch: false, value: 'Item 12' },
+        { switch: false, value: 'Item 13' },
+        { switch: false, value: 'Item 14' },
+        { switch: false, value: 'Item 15' },
+        { switch: false, value: 'Item 16' },
+        { switch: false, value: 'Item 17' },
+        { switch: false, value: 'Item 18' },
+        { switch: false, value: 'Item 19' },
+        { switch: false, value: 'Item 20' }
+      ]
+    }
+  },
+  template: `
+      <ListView for="item in items">
+          <v-template>
+              <GridLayout padding="24" columns="*, auto, auto">
+                  <TextField v-model="item.value"/>
+                  <Label :text="item.switch" col="1"/>
+                  <Switch v-model="item.switch" col="2"/>
+              </GridLayout>
+          </v-template>
+      </ListView>
+  `
+}).$start()

samples/app/644.js

@@ -0,0 +1,29 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+// console.log(Vue.compile('<Switch v-model="arrival" color="red"/>').render.toString())
+
+new Vue({
+  data() {
+    return {
+      currentStep: 0,
+      departure: false,
+      arrival: false
+    }
+  },
+  template: `
+      <StackLayout>
+          <Button :text="\`Step 0 - \${departure}\`" :color="currentStep === 0 ? 'green' : 'black'" @tap="currentStep = 0"/>
+          <Button :text="\`Step 1 - \${arrival}\`" :color="currentStep === 1 ? 'green' : 'black'"  @tap="currentStep = 1"/>
+          <Button text="Toggle" @tap="departure = !departure"/>
+          <GridLayout v-if="currentStep===0">
+              <Switch v-model="departure" color="blue"/>
+          </GridLayout>
+          <GridLayout v-else-if="currentStep===1">
+              <Switch v-model="arrival" color="red"/>
+          </GridLayout>
+      </StackLayout>
+  `
+}).$start()