javascript - 为什么当数据设置为 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 时消失吗？

score 1 · Accepted Answer

您正在指定一个data属性，该属性将适用于单个 Vue 实例，但不适用于 Vue 组件。请参阅初学者陷阱页面。

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

data() {
  return {
    showModal: true
  }
}

1 回答 1