Question

出于某种原因，我无法让Vue Modal在我的Vue-cli安装中工作。尝试从https://vuejs.org/v2/examples/modal.html

运行模态示例

我仍然是Vue的新手，所以请原谅我的简单问题。

非常感谢任何帮助。

的index.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
  }
})

Page.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>

Answer 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>

无法让Vue Modal在Vue-cli工作

1 个答案: