Vueify modal nicht richtig funktioniert, wenn vueify und eine Master Modal.vue Datei für modale Vorlagen verwenden

Question

Ich habe versucht, diese http://adamwathan.me/2016/01/04/composing-reusable-modal-dialogs-with-vuejs/ zu folgen und es mit Vueify arbeiten, schaffte ich es neu zu tun, änderte sich dann zu a andere Methode und entschied sich, zurück zu kommen. Jetzt bekomme ich ein Problem, bei dem meine Modale nur auf der Seite selbst rendern, nicht als Modal. Ich benutze Laravel 5.2 und den letzten Vue, der von einem CDN in die Datei meiner index.blade.php gezogen wird.

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, 
    } 
}); 

Revelent Teil von 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> 

Es Rendering landen nur die NewSaleModal auf die Seite wie so http://i.imgur.com/j6vBTt6.png

Es gibt absolut keine Fehler in meiner Konsole, wenn ich die <NewSaleModal> in VueDevTools die „Show“ Eigenschaft überprüfen auf false gesetzt ist, und in der <Root> der ShowModal Variable wird ebenfalls auf false gesetzt.

Hier ist meine gulpfile und package.json auch.

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" 
    } 
} 

Jede Hilfe, warum es nicht richtig wäre toll mein NewSaleModal.vue modal zu machen.

Answer 1

Nach ziemlich viel schauen fand ich eine Antwort.

Was ich falsch gemacht habe, war, dass ich die Modal-Komponente nicht in meine NewSaleModal.vue-Datei aufgenommen habe. So habe ich

import Modal from './Modal.vue' 

Vor dem Export standardmäßig hinzugefügt dann

components: { 
     Modal 
}, 

Um das Skript selbst und es behoben mein Problem.