为什么当数据设置为 true 时我的 bulma 模态不显示？ (Vue.js)答案

【问题标题】：Why is my bulma modal not displaying when data is set to true? (Vue.js)为什么当数据设置为 true 时我的 bulma 模态不显示？ (Vue.js)
【发布时间】：2018-02-13 20:16:42
【问题描述】：

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。

知道当数据设置为真时如何使模式出现，设置为假时如何消失吗？

【问题讨论】：

标签： javascript css vue.js pug bulma

【解决方案1】：

您正在指定一个 data 属性，该属性将适用于单个 Vue 实例，但不适用于 Vue 组件。请参阅Beginner Gotchas Page。

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

data() {
  return {
    showModal: true
  }
}

【讨论】：