Stop event propagation Nativescript (vue)

#nativescript #nativescriptvue #vue #snippet

Consider this layout:

<template>
  <FlexboxLayout @tap="dismiss">
    <Button text="Submit" @tap="submit" />
  </FlexboxLayout>
</template>

<script>
export default {
  methods: {
    dismiss () {
      console.log('dismiss')
    },
    submit () {
      console.log('submit')
    }
  }
}
</script>

When tap on FlexboxLayout area console output will be:

dismiss

and its okey.

When tap on "Submit" button console output will be:

dismiss
submit

But we expect to get:

submit

Since we have no official way to do this (like what in browser Event.stopPropagation), then here is the hacky/dirty way:

<template>
  <FlexboxLayout @tap="dismiss">
    <StackLayout @tap="nothing">
      <Button text="Submit" @tap="submit" />
    </StackLayout>
  </FlexboxLayout>
</template>

<script>
export default {
  data () {
    return {
      ignoreTap: false
    }
  },
  methods: {
    nothing () {
      this.ignoreTap = true
    ,
    dismiss () {
      if (this.ignoreTap) {
        this.ignoreTap = false
        return true
      }
      console.log('dismiss')
    },
    submit () {
      console.log('submit')
    }
  }
}
</script>

Investigations:

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →