vueifyとモーダルテンプレート用のマスターModal.vueファイルを使用すると、モーダルが正しく動作しない

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

から

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部

そうhttp://i.imgur.com/j6vBTt6.png

あり、私は「ショー」プロパティがfalseに設定されているVueDevToolsで<NewSaleModal>をチェックしたときに、私のコンソールにエラーが、絶対にません、と<Root>でshowModalのようにそれはちょうどページへNewSaleModalをレンダリング終わるですvariableも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 
}, 

を追加し、それは私の問題を修正しました。