Vue-cli 无法显示模式 window

Question

我已经创建了一个 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>

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

https://adamwathan.me/2016/01/04/composing-reusable-modal-dialogs-with-vuejs/

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

Answer 1

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

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

Vue-cli 无法显示模式 window

Vue-cli cannot show modal window

html

javascript

vue.js

vuejs2

vue-cli