当数据设置为 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>

如果这里的数据设置为真，我只希望模式显示（仍在 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 方法，其中 returns 一个对象 showModal 设置为 true:

data() {
  return {
    showModal: true
  }
}

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