0

我正在研究 Laravel + spark + vue js。以下是我的代码

应用程序js

Vue.component('spark-emergency', { 
data() {
    return {
        emergencies:[],
        deleteEmergency:[],
        editEmergency:[],
        editEmergencyForm: new SparkForm({}),
        deleteEmergencyForm: new SparkForm({}),
        newEmergency: new SparkForm({
            name: '',
            type: '',
            description:''
        })
    };
},
created() {
    this.getEmergencies();
},
methods: {
    getEmergencies() {
        this.$http.get('/get-emergencies-plan-template')
            .then(response => {
                this.emergencies = response.data;
            });
    },
    deleteEmergencyPlanTemplateConfirmation(emergency){
        this.deleteEmergency = emergency
        $('#modal-delete-emergency').modal('show');
    },
    deleteEmergencyPlanTemplate(){
        Spark.delete(`/delete-emergencies-plan-template/${this.deleteEmergency.slug}`, this.deleteEmergencyForm)
            .then(() => {
                Bus.$emit('updateEmergencies');
                $('#modal-delete-emergency').modal('hide');
            });
    },
    createEmergencyPlanTemplate(){
        Spark.post('/save-emergency-plan-template', this.newEmergency)
            .then(() => {
                this.newEmergency.name = '';
                this.newEmergency.type = '';
                this.newEmergency.description = '';
                Bus.$emit('updateEmergencies');
            });
    },
    editEmergencyPlanTemplate(emergency){
        this.editEmergency = emergency
        $('#modal-edit-emergency').modal('show');
    },
    updateEmergencyPlanTemplate(){

    }
}
});

刀片文件

<spark-emergency inline-template>
<div class="spark-screen container">
    <div class="row">
        <div class="col-md-12">

            <!-- create new emergency -->
            <div class="panel panel-default">
                <div class="panel-heading">Create emergency</div>

                <div class="panel-body">
                    <form class="form-horizontal" role="form"></form>

                </div>
            </div>

            <!-- listing of emergencies -->
            <div class="panel panel-default">
                <div class="panel-heading">Emergencies Plan Template</div>

                <div class="panel-body">
                    <table class="table table-borderless m-b-none">
                        <thead>
                            <th>Name</th>
                            <th></th>
                        </thead>

                        <tbody>
                            <tr v-for="emergency in emergencies">

                                <td>
                                    <div class="btn-table-align">
                                        @{{ emergency.name }}
                                    </div>
                                </td>

                                <!-- Delete Button -->
                                <td>
                                    <button class="btn btn-danger-outline" @click="deleteEmergencyPlanTemplateConfirmation(emergency)">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>       

            <!-- Edit Emergency Modal -->
            <div class="modal fade" id="modal-edit-emergency" tabindex="-1" role="dialog"></div>

            <!-- Delete Emergency Modal -->
            <div class="modal fade" id="modal-delete-emergency" tabindex="-1" role="dialog"></div>

        </div>
    </div>
</div>

</spark-emergency>

在添加新的和编辑逻辑之前，它工作得很好，但在那之后 Bus.$emit('updateEmergencies'); 停止工作，现在它不工作了。

任何建议可能是什么原因？

4

0 回答 0