fix: once event modifier (nativescript-vue#752)

jarmani · web-flow · commit 2a1b06fc29f1 · 2020-11-21T15:34:54.000+01:00
closes nativescript-vue#748 * fix: updateListeners from vue need an once handler Update log while here to make it clear where capture is not supported * test(samples): add sample for once directive
diff --git a/platform/nativescript/runtime/modules/events.js b/platform/nativescript/runtime/modules/events.js
@@ -2,9 +2,19 @@ import { updateListeners } from 'core/vdom/helpers/update-listeners'
 
 let target
 
+function createOnceHandler(event, handler, capture) {
+  const _target = target // save current target element in closure
+  return function onceHandler() {
+    const res = handler.apply(null, arguments)
+    if (res !== null) {
+      remove(event, onceHandler, capture, _target)
+    }
+  }
+}
+
 function add(event, handler, once, capture) {
   if (capture) {
-    console.log('bubble phase not supported')
+    console.log('NativeScript-Vue do not support event in bubble phase.')
     return
   }
   if (once) {
@@ -30,7 +40,7 @@ function updateDOMListeners(oldVnode, vnode) {
   const on = vnode.data.on || {}
   const oldOn = oldVnode.data.on || {}
   target = vnode.elm
-  updateListeners(on, oldOn, add, remove, vnode.context)
+  updateListeners(on, oldOn, add, remove, createOnceHandler, vnode.context)
   target = undefined
 }
 
diff --git a/samples/app/748.js b/samples/app/748.js
@@ -0,0 +1,26 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+new Vue({
+  data: {
+    foo: false
+  },
+  template: `
+    <Frame>
+      <Page>
+        <ActionBar title="Issue #748" />
+
+        <StackLayout>
+          <Button text="Only once" @tap.once="onlyOnce" />
+        </StackLayout>
+      </Page>
+    </Frame>
+  `,
+  methods: {
+    onlyOnce() {
+      console.log('this log should only appear once')
+    }
+  }
+}).$start()
