Laravel + Vue:按钮和模式组件未显示在刀片​​中

时间:2018-11-08 01:16:10

标签: laravel vue.js laravel-blade

我正在研究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">&times;</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>

0 个答案:

没有答案