[英]Add VueJs modal component to Laravel template
關於簡單情況的問題,我想將 vue modal 組件添加到默認的 Laravel 項目中。 當我以這種方式注冊時:
Vue.component('modal', {
template: '#modal-template'
})
new Vue({
el: '#app',
data: {
showModal: false
}
})
並像這樣命名組件:
ModalComponent.vue
瀏覽器給我下一個錯誤。 Github 存儲庫中的所有詳細信息
順便說一句,也許更好地使用 jQuery 從引導程序添加模態窗口,否則會很亂?
你應該有 :
Vue.component('modal', require('./components/ModalComponent.vue'));
在您的ModalComponent.vue
文件中:
<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
}
</script>
view.blade.php
<div id="app">
<button id="show-modal" @click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" @close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.