使用 vueify 和模态模板的主 Modal.vue 文件时，Vueify 模态无法正常工作答案

【问题标题】：Vueify modal not working properly when using vueify and a master Modal.vue file for modal templates使用 vueify 和模态模板的主 Modal.vue 文件时，Vueify 模态无法正常工作
【发布时间】：2016-08-06 18:46:51
【问题描述】：

我一直在尝试关注这个http://adamwathan.me/2016/01/04/composing-reusable-modal-dialogs-with-vuejs/ 并让它与 Vueify 一起工作，前几天我设法做到了，然后换了一种不同的方法并决定回来。现在我遇到了一个问题，即我的模态只是在页面本身上呈现，而不是作为模态。我正在使用 Laravel 5.2，最新的 Vue 是从我的 index.blade.php 扩展的文件中的 CDN 中提取的。

Modal.vue

<template>
    <div class="modal-mask" @click="close" v-show="show" transition="modal">
        <div class="modal-container" @click.stop>
            <slot></slot>
        </div>
    </div>
</template>

<script lang="babel">

    export default {
        props: ['show', 'onClose'],
        methods: {
            close: function () {
                this.onClose();
            }
        },
        ready: function () {
            document.addEventListener("keydown", (e) => {
                if (this.show && e.keyCode == 27) {
                    this.onClose();
                }
            })
        }
    }
</script>

NewSaleModal.vue

<template>
    <modal :show.sync="show" :on-close="close">
        <div class="modal-header">
            <h3>New Post</h3>
        </div>

        <div class="modal-body">
            <label class="form-label">
                Title
                <input v-model="title" class="form-control">
            </label>
            <label class="form-label">
                Body
                <textarea v-model="body" rows="5" class="form-control"></textarea>
            </label>
        </div>

        <div class="modal-footer text-right">
            <button class="modal-default-button" @click="savePost()">
                Save
            </button>
        </div>
    </modal>
</template>

<script lang="babel">
    export default {
        props: ['show'],
            data: function () {
                return {
                    title: '',
                    body: ''
                }
            },
        methods: {
            close: function () {
                this.show = false;
                this.title = '';
                this.body = '';
            }
        }
    }
</script>

App.js

import Vue from 'vue';
import VueResource from 'vue-resource';
import Modal from './v-components/Modal.vue';
import NewSaleModal from './v-components/NewSaleModal.vue';

Vue.use(VueResource);

new Vue({
    el: '#app',
    components: {Modal, NewSaleModal},
    data: {
        showModal: false,
    }
});

来自 index.blade.php 的相关部分

<div class="module" id="app">
        <new-sale-modal :show.sync="showModal"></new-sale-modal>
    <button id="show-modal" @click="showModal = true">New Post</button>
</div>

最终只是将 NewSaleModal 渲染到页面，就像http://i.imgur.com/j6vBTt6.png

我的控制台中绝对没有错误，当我检查 VueDevTools 中的 <NewSaleModal> 时，“show”属性设置为 false，而在 <Root> 中，showModal 变量也设置为 false。

这也是我的 gulpfile 和 package.json。

gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.less('main.less')
       .browserify('app.js')
       .version([
            './public/css/main.css',
            './public/js/app.js'
       ])
       .browserSync({proxy: 'site.dev'});
});

package.json

{
  "name": "ProjectName",
  "version": "1.0.0",
  "devDependencies": {
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "laravel-elixir-vueify": "^1.0.3",
    "notify-send": "^0.1.2",
    "vue-resource": "^0.7.0",
    "vueify": "^8.3.9"
  },
  "dependencies": {
    "laravel-elixir": "^6.0.0-1",
    "laravel-elixir-browserify": "^0.8.1"
  }
}

任何关于为什么我的 NewSaleModal.vue 不能正确地成为模态的帮助都会很棒。

【问题讨论】：

标签： javascript php laravel vue.js

【解决方案1】：

看了很多遍，终于找到答案了。

我做错了，我没有在我的 NewSaleModal.vue 文件中包含 Modal 组件。所以我加了

import Modal from './Modal.vue'

在导出默认之前，然后添加

components: {
        Modal
},

到脚本本身，它解决了我的问题。

【讨论】：