无法让 Vue Modal 在 Vue-cli 中工作答案

【问题标题】：Cant get Vue Modal to work in Vue-cli无法让 Vue Modal 在 Vue-cli 中工作
【发布时间】：2018-07-18 21:39:58
【问题描述】：

由于某些我无法理解的原因，我无法让 Vue Modal 在我的 Vue-cli 安装中工作。尝试从以下位置运行模态示例：https://vuejs.org/v2/examples/modal.html

我对 Vue 还是很陌生，所以请原谅我的简单问题。

任何帮助将不胜感激。

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
      <script type="text/x-template" id="modal-template">
        <transition name="modal">
          <div class="modal-mask">
            <div class="modal-wrapper">
              <div class="modal-container">

                <div class="modal-header">
                  <slot name="header">
                    default header
                  </slot>
                </div>

                <div class="modal-body">
                  <slot name="body">
                    default body
                  </slot>
                </div>

                <div class="modal-footer">
                  <slot name="footer">
                    default footer
                    <button class="modal-default-button" @click="$emit('close')">
                      OK
                    </button>
                  </slot>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </script>
    <main id="app"></main>
  </body>
</html>

Main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.component('modal', {
  template: '#modal-template'
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
    showModal: false
  }
})

页面.vue

<template>
<div>
  <button id="show-modal" @click="showModal = true">Show Modal</button>
  <!-- use the modal component, pass in the prop -->
  <modal v-if="showModal" @close="showModal = false">
    <!--
      you can use custom content here to overwrite
      default content
    -->
    <h3 slot="header">custom header</h3>
  </modal>
</div>
</template>

<script>
  export default {
    name: 'VueModal',
    methods: {
      hideModal () {
        return this.$store.commit('hideModal')
      }
    }
  }
</script>

【问题讨论】：

Page.vue 是作为 App.vue 导入的吗？
看起来你用的不是 Vuex，所以你对this.$store.commit 的使用令人费解。

标签： javascript vue.js

【解决方案1】：

您似乎没有使用Vuex，因此代码行

return this.$store.commit('hideModal')

不会工作。

另外，你的showModal在Main.js而不是你的Page.vue，而且你实际上没有使用hideModal()的方法，修改你在Page.vue中的脚本如下：

<script>
  export default {
    name: 'VueModal',
    data() {
      return { showModal: false };
    }
  }
</script>

【讨论】：