Why is my bulma modal not displaying when data is set to true? (Vue.js)

Question

New to Vue.js and bulma. I am trying to get a modal pop up to work, so far I have this from including the modal component in the main App.vue file:

<template lang="pug">
  div#app
    navigation-menu
    menu-modal
    transition(name="fade")
      router-view
</template>

I only want the modal to show if the data is set to true here (still in App.vue, inside the script tags):

 export default {
  name: 'app',
  components: {
      NavigationMenu, MenuModal
   },
  data: {
    showModal: true
  }
}

I tried adding this inside the template tags (Vue.js):

But the modal just disappeared from the page, even when showModal is set to true in data.

Any idea how to make the modal appear when data is set to true and disappear when set to false?

Answer 1

You are specifying a data property, which will work a single Vue instance, but not on a Vue component. See the Beginner Gotchas Page.

You should specify a data method which returns an object with showModal set to true:

data() {
  return {
    showModal: true
  }
}