Vue-cli 无法显示模态窗口答案

【问题标题】：Vue-cli cannot show modal windowVue-cli 无法显示模态窗口
【发布时间】：2020-05-11 15:38:53
【问题描述】：

我已经创建了一个 vue-cli 应用程序以及我现在拥有的：

Main.js

import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(Element)
new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
  <head>
    <title>SmartPlanPlus</title>
  </head>
  <SmartPlan/>
  </div>
</template>

<script>
import SmartPlan from './components/SmartPlan.vue'

export default {
  name: 'app',
  components: {
    SmartPlan
  }
}
</script>

SmartPlan.vue

<template>
 <div id="app">  
  <el-container>
  <el-header>
  <table>
    <tr>
      <td>
        <el-button icon="el-icon-folder-opened" circle @click="showModal = true">
        </el-button>
        <modal :show="showModal" @close="showModal = false"></modal>
      </td>
    </tr>
  </table>
  </el-header>
  <el-main>
  <svg overflow="scroll" viewBox="0 0 500 250"><g id="svg_obj" transform="translate(0,200) scale(1,-1)"></g></svg>
  </el-main>
  <el-footer>
  </el-footer>
  </el-container>
 </div>
</template>

<script>

import modal from '../components/PlanList.vue'

export default {
  name: 'SmartPlan',
  props: {
  },
  components: {
    modal
  }
}
</script>

PlanList.vue

<template>
    <transition name="modal">
        <div class="modal-mask" v-show="show">
            <div class="modal-container">
                <div class="modal-header">
                    <h3>New Post</h3>
                </div>
                <div class="modal-body">
                    <label class="form-label">
                        Title
                        <input class="form-control">
                    </label>
                    <label class="form-label">
                        Body
                        <textarea rows="5" class="form-control"></textarea>
                    </label>
                </div>
                <div class="modal-footer text-right">
                    <button class="modal-default-button" @click="savePost()">
                        Save
                    </button>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
  name: 'modal',
    props: ['show'],
}
</script>

我检查了几乎所有示例，例如：

我希望在 SmartPlan 上按下按钮时弹出一个模式窗口，但它不起作用。我做错了什么？

【问题讨论】：

你的 showModal 数据值在哪里？
@Qonvex620 我试图将它添加到 main.js 中，例如：data: { showModal: false } 但我收到错误消息：属性或方法“showModal”未在实例上定义，但在渲染期间引用。
那么如果它在您的组件中不可用，您如何将它传递给模态？
@Qonvex620 我不知道。正如我之前提到的 - 我是 vue 的新手。我必须做什么？

标签： javascript html vue.js vuejs2 vue-cli

【解决方案1】：

在您的 SmartPlan.vue 中忘记将 showModal 数据放入您的数据模型中。像这样放一个

export default {
  name: 'SmartPlan',
  data() {
     return {
        showModal:false
     }
  }
  props: {
  },
  components: {
    modal
  }
}

【讨论】：