我正在研究Laravel应用程序的CRUD部分。
假设单击条目的删除按钮时,将显示一个模式,并要求用户确认是否删除相应的条目。
我试图通过定义2个单独的组件来做到这一点-删除按钮和模式。我将按钮放置在刀片php中。
它只是没有显示出来,但是元素在页面的html文档中,并且没有错误。
这是我的前端代码。
如何使其显示?
谢谢!
blade.php
<div id="app">
<btn-delete project="{{ $project }}"></btn-delete>
</div>
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('btn-delete', require('./components/BtnDelete.vue'));
Vue.component('modal-delete', require('./components/ModalDelete.vue'));
const app = new Vue({
el: '#app'
});
BtnDelete.vue
<template>
<div>
<button class="btn btn-danger" @click="showDeleteModal">delete</button>
<modal-delete v-if="modal" @delete="deleteItem"
@close="closeDeleteModal"></modal-delete>
</div>
</template>
<script>
export default {
data() {
return {
modal:false
}
},
props: ['project'],
methods: {
showDeleteModal(){
this.modal = true
},
closeDeleteModal(){
this.modal = false
},
deleteItem() {
alert("project : " + this.project);
}
}
}
</script>
ModalDelete.vue
<template>
<div class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
@click.prevent="$emit('close')">Close</button>
<button type="button" class="btn btn-primary"
@click.prevent="$emit('delete')">Save</button>
</div>
</div>
</div>