我一直在努力遵循http://adamwathan.me/2016/01/04/composing-reusable-modal-dialogs-with-vuejs/和Vueify一起工作,前几天我设法做到了,然后换了一种不同的方法,决定回来。现在我遇到了一个问题,我的模态只是在页面本身上呈现,而不是作为模态。我使用的是Laravel 5.2和我的index.blade.php扩展文件中的CDN中的最新Vue。
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>
它最终只是像这样在页面上呈现NewSaleModelhttps://i.stack.imgur.com/pGhw6.png
我的控制台中绝对没有错误,当我在VueDevTools中检查<NewSaleModal>
时,"show"属性设置为false,在<Root>
中,showModal变量也设置为false。
这是我的gulpfile和package.json。
gullfile.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'});
});
软件包.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成为模态的帮助都将是非常好的。
经过大量查找,我找到了答案。
我做错的是,我没有在NewSaleModal.vue文件中包括Modal组件。所以我添加了
import Modal from './Modal.vue'
在导出默认值之前,然后添加
components: {
Modal
},
对脚本本身,它解决了我的问题。