I've been experimenting with integrating this tutorial on creating reusable modal dialogs with Vuejs and adapting it for use with Vueify. Initially, I was able to successfully implement it, but after exploring a different approach briefly, I returned to encounter an issue where the modals were not appearing as expected but rather rendering directly on the page. My setup involves Laravel 5.2 and the latest version of Vue from a CDN included in my index.blade.php file.
Here's the structure of my Modal.vue component:
<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>
And here's the structure of 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>
The initialization in 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,
}
});
Section from 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>
Instead of functioning as a modal, the content of NewSaleModal.vue is simply being rendered onto the page, visible here: https://i.stack.imgur.com/pGhw6.png. Despite no console errors being reported, both the "show" property within <NewSaleModal> and the "showModal" variable within <Root> are set to false.
Below are excerpts from my gulpfile and package.json files:
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"
}
}
If anyone can provide insights into why NewSaleModal.vue is not behaving as intended, I would greatly appreciate it.