Vueify模式在使用vueify时不能正常工作，并为模式模板提供了主Modal.vue文件

Question

我一直在努力跟踪这个http://adamwathan.me/2016/01/04/composing-reusable-modal-dialogs-with-vuejs/，并让它与Vueify一起工作，前几天我设法做到了，然后改变了另一种方法，决定回来。现在我得到一个问题，我的调制解调器只是呈现在页面本身，而不是作为一个模式。我使用的是Laravel5.2，我的index.blade.php扩展的文件中最近的Vue是从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中检查VueDevTools时，"show“属性被设置为false，而在<Root>中，showModal变量也被设置为false。

这是我的and文件和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模式将是很好的。

Answer 1

看了很久后，我找到了答案。

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

import Modal from './Modal.vue'

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

components: {
        Modal
},

它解决了我的问题。