当数据设置为true时，为什么我的bulma模式不显示？ （Vue.js）

Question

Vue.js和bulma的新手。我试图让一个模态弹出工作，到目前为止，我有这个包括在主App.vue文件中的模态组件：

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

我只希望模态在这里显示数据是否设置为true（仍在App.vue中，在脚本标记内）：

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

我尝试在模板标签（Vue.js）中添加它：

但即使在数据中将showModal设置为true，模式也会从页面中消失。

知道如何在数据设置为true时显示模态并在设置为false时消失吗？

Answer 1

您正在指定data属性，该属性将在单个Vue实例上运行，但不在Vue组件上运行。请参阅Beginner Gotchas Page。

您应该指定data方法，该方法返回showModal设置为true的对象：

data() {
  return {
    showModal: true
  }
}