Question

我一直在努力遵循这个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的Revelent部分

<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成为模态的任何帮助都会很棒。

Answer 1

经过大量的观察，我找到了答案。

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

import Modal from './Modal.vue'

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

components: {
        Modal
},

对于脚本本身并解决了我的问题。

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

1 个答案: