刀片和Javascript不以HTML呈现（Laravel 5+；）

我对Laravel不熟悉，在这个项目上挣扎了一段时间，作为总结，我只是创建了一个页面，列出了“任务”列表（包括相应的名字、姓氏、开始/结束日期和部门）。我能够成功地编辑它们，并创建新任务。但由于某种原因，每当我尝试删除时，我都会看到当确认窗口弹出时，我希望显示的数据没有在HTML文件中呈现，因此没有正确显示

~这是我的.js文件（它控制显示哪些模态，并在控制器中对我的函数进行所有调用——后端的东西等等）：

Vue.http.headers.common['X-CSRF-TOKEN']=$（“#TOKEN”）.attr（“value”）//使用
jQuery在这里查询令牌
新建Vue（{//这是一个新的Vue对象
el:“#manage vue”，//在此之后，el变量中的所有内容仅适用于我们定义为“manage vue”的类
数据：{//这是一个变量
任务：[]，//存储任务
分页：{
总数：0，
每页：2，
发信人:1,，
至:0,，
当前页面：1
},
抵销：4，
formErrors:{}，
formErrorsUpdate:{}，
新任务：{'name'：''，'last_name'：''，'start_date'：''，'end_date'：''，'department'：''，//正确？？
fillTask:{'name'：''，'last_name'：''，'start_date'：''，'end_date'：''，'department'：''，'id'：''正确吗？？
},
计算：{//这是一个新变量
isActived:function（）{//验证活动类的任务是否处于活动状态（以便他可以突出显示我们在底部的页面）
返回this.pagination.current_页面；
},
//计算我们的页数
pagesNumber:函数（）{
如果（！this.pagination.to）{
返回[]；
}
var from=this.pagination.current_page-this.offset；
如果（从<1开始）{
from=1；
}
var to=from+（该偏移量*2）；
如果（到>=此.pagination.last_页）{
to=this.pagination.last_page；
}
var pagesArray=[]；
而{
这个.set（'tasks'，response.data.data.data）；
这个.set（'pagination'，response.data.pagination）；
});
},
createTask:function（）{
var输入=this.newTask；
这个.http.post（'/vuetasks'，input）。然后（（response）=>{//调用控制器中的存储函数
this.changePage（this.pagination.current_页面）；
this.newTask={'name'：''，'last_name'：''，'start_date'：''，'end_date'：''，'department'：''；
$（“#创建任务”）.modal（'hide'）；
toastr.success（'项目创建成功'，'成功警报'，{timeOut:5000}）；
}，（回应）=>{
this.formErrors=response.data；
});
},
确认删除：函数（任务）{//不需要任务的字段
this.fillTask.name=task.name；
this.fillTask.id=task.id；
$（“#删除任务”）.modal（'show'）；//显示删除确认页
},
deleteTask：函数（任务）{
这是.http.delete（'vuetasks/'+task.id）。然后（（响应）=>{
this.changePage（this.pagination.current_页面）；
$（“#删除任务”）.modal（'hide'）；//隐藏删除确认页
toastr.success（'Task Deleted Successfully！'，'success Alert'，{timeOut:5000}）；
});
},
editTask:函数（任务）{
this.fillTask.name=task.name；
this.fillTask.last_name=task.last_name；
this.fillTask.start_date=task.start_date；
this.fillTask.end_date=task.end_date；
this.fillTask.department=task.department；
this.fillTask.id=task.id；
$（“#编辑任务”）.modal（'show'）；
},
updateTask:函数（id）{
var输入=this.fillTask；
这个.http.put（'/vuetasks/'+id，输入）。然后（（响应）=>{//调用控制器中的更新函数
this.changePage（this.pagination.current_页面）；
this.fillTask={'name'：''，'last_name'：''，'id'：''，'start_date'：''，'end_date'：''，'department'：''}
；//暂时删除正在显示的内容
$（“#编辑任务”）.modal（'hide'）；//隐藏用于可视化的模式
目的
toastr.success（'任务已成功更新！'，'成功警报'，
{超时：5000}）；
}，（回应）=>{
this.formErrorsUpdate=response.data；
});
},
更改页面：功能（第页）{
this.pagination.current_page=第页；
此.getVueTasks（第页）；
}
}//存储构成vue对象的所有这些变量的结束结构
}); //结束新vue对象的创建

~以下是我的manage-vue.blade.php文件（应该呈现我想要显示的内容的HTML文件）的相关部分的片段：

名字
姓
开始日期
结束日期
部门
行动
@{{task.name}
@{{task.last_name}
@{{task.start_date}
@{{task.end_date}
@{{task.department}
编辑
删除
x
删除？
是否确实要删除
@{{fillTask.name}？
提交取消
Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value"); //using 
jQuery here for token

new Vue({ //this is a new Vue object

el: '#manage-vue', //everything after this applies in the el variable applies only to the class we defined as 'manage-vue'

data: { //this is a variable
    tasks: [], //store tasks
    pagination: {
        total: 0,
        per_page: 2,
        from: 1,
        to: 0,
        current_page: 1
    },
    offset: 4,
    formErrors:{},
    formErrorsUpdate:{},
    newTask: {'name':'', 'last_name':'','start_date':'','end_date':'','department':''}, //correct ??
    fillTask: {'name':'','last_name':'','start_date':'','end_date':'','department':'','id':''}//correct ??
},

computed: { //this is a new variable
    isActived: function () { //verifies if a task is active for active class (so he can highlight the page we're on at the bottom)
        return this.pagination.current_page;
    },

    //calculating the number of pages we have
    pagesNumber: function () { 
        if (!this.pagination.to) {
            return [];
        }
        var from = this.pagination.current_page - this.offset;

        if (from < 1) {
            from = 1;
        }

        var to = from + (this.offset*2);
        if (to >= this.pagination.last_page) {
            to = this.pagination.last_page;
        }
        var pagesArray = [];
        while (from <= to) {
            pagesArray.push(from); //array of all pages
            from++;
        }
        return pagesArray;
    }
},

ready : function() {
    this.getVueTasks(this.pagination.current_page);
},

methods: {

    getVueTasks: function(page) {
        this.$http.get('/vuetasks?page='+page).then((response) => {
            this.$set('tasks', response.data.data.data);
            this.$set('pagination', response.data.pagination);
        });
    },

    createTask: function() {
        var input = this.newTask;
        this.$http.post('/vuetasks',input).then((response) => { //calls the store function in controller
            this.changePage(this.pagination.current_page);
            this.newTask = {'name':'','last_name':'','start_date':'','end_date':'','department':''};
            $("#create-task").modal('hide');
            toastr.success('Item Created Successfully.', 'Success Alert', {timeOut: 5000});
        }, (response) => {
            this.formErrors = response.data;
        });
    },

    confirmDeletion: function(task) { //dont need the fields of a task
        this.fillTask.name = task.name;
        this.fillTask.id = task.id;
        $("#delete-task").modal('show'); //show a confirmation page for a deletion
    },

    deleteTask: function(task) {
        this.$http.delete('vuetasks/'+task.id).then((response) => {
            this.changePage(this.pagination.current_page);
            $("#delete-task").modal('hide'); //hide a confirmation page for a deletion

            toastr.success('Task Deleted Successfully!', 'Success Alert', {timeOut: 5000});
        });
    },

    editTask: function(task) {
        this.fillTask.name = task.name;
        this.fillTask.last_name = task.last_name;
        this.fillTask.start_date = task.start_date;
        this.fillTask.end_date = task.end_date;
        this.fillTask.department = task.department;
        this.fillTask.id = task.id;
        $("#edit-task").modal('show');
    },

    updateTask: function(id) {
        var input = this.fillTask;
        this.$http.put('/vuetasks/'+id,input).then((response) => { //calls update function in the controller
            this.changePage(this.pagination.current_page);
            this.fillTask = {'name':'','last_name':'','id':'','start_date':'','end_date':'','department':''}
 ; //temporarily blanks out whats being showed
            $("#edit-task").modal('hide'); //hides the modal for visual 
 purposes
            toastr.success('Task Updated Successfully!', 'Success Alert', 
{timeOut: 5000});
        }, (response) => {
            this.formErrorsUpdate = response.data;
        });
    },

    changePage: function(page) {
        this.pagination.current_page = page;
        this.getVueTasks(page);
    }
}//end structure storing all these variables making up the vue object
}); //ending the creation of the new vue object

<!-- Task Listing-->
        <table class="table table-bordered">
            <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Department</th>
                    <th width="200px">Action</th>
            </tr>

            <tr v-for="task in tasks">
                <td>@{{ task.name }}</td> <!-- This at symbol explicitely 
tells blade to skip the double braces and read it as JS-->
                <td>@{{task.last_name }}</td> <!--So that only the action 
gets the buttons below-->
                <td>@{{ task.start_date }}</td>
                <td>@{{ task.end_date }}</td>
                <td>@{{ task.department }}</td>
                <td>
                    <button class="btn btn-primary" 
@click.prevent="editTask(task)">Edit</button>
                    <button class="btn btn-primary" 
@click.prevent="confirmDeletion(task)">Delete</button> <!--Calls function is 
JS file to initiate confirmation window-->
                </td>

            </tr>
        </table>


<!--Delete Task Modal--> <!--This is specifically the confirmation window 
after clicking delete button-->
            <div class="modal fade" id="delete-task" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-
 dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span>
 </button>
                            <h4 class="modal-title" 
 id="myModalLabel">Delete?</h4>
                        </div>

                        <div class ="modal-body">

                            <form method="POST" enctype="multipart/form-
data" v-on:submit.prevent="deleteTask(fillTask)"> <!--This now calls the 
original delete function from JS file after you click submit-->

                                <div class="form-group">
                                    Are you sure you want to delete 
@{{fillTask.name}}?
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-
success">Submit</button> <button type="button" class="btn btn-danger" data-
dismiss="modal">Cancel</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

<!--Edit Task Modal-->
            <div class="modal fade" id="edit-task" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-
dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span>
</button>
                            <h4 class="modal-title" id="myModalLabel">Edit 
Task: @{{fillTask.name}}</h4>
                        </div>

                        <div class ="modal-body">

                            <form method="POST" enctype="multipart/form-
data" v-on:submit.prevent="updateTask(fillTask.id)">


                                <div class="form-group">
                                    <label for="name">First Name:</label>
                                    <input type="text" name="name" 
class="form-control" v-model="fillTask.name"/>
                                    <span v-if="formErrorsUpdate['name']" 
class="error text-danger">@{{ formErrorsUpdate['name'] }}</span>

                                    <br></br>
                                </div>

                                <div class="form-group">
                                    <label for="name">Last Name:</label>
                                    <input type="text" name="last_name" 
class="form-control" v-model="fillTask.last_name"/>
                                    <span v-
if="formErrorsUpdate['last_name']" class="error text-danger">@{{ 
formErrorsUpdate['last_name'] }}</span>

                                </div>

                                    <br></br>

                                <div class="form-group">
                                    <label for="name">Start date:</label>
                                    <input type="text" name="start_date" 
class="form-control" v-model="fillTask.start_date"/>
                                    <span v-
if="formErrorsUpdate['start_date']" class="error text-danger">@{{ 
formErrorsUpdate['start_date'] }}</span>

                                </div>

                                    <br></br>

                                <div class="form-group">
                                    <label for="name">End date:</label>
                                    <input type="text" name="end_date" 
class="form-control" v-model="fillTask.end_date"/>
                                    <span v-
if="formErrorsUpdate['end_date']" class="error text-danger">@{{ 
formErrorsUpdate['end_date'] }}</span>

                                </div>

                                    <br></br>

                                <div class="form-group">    
                                    <label for="name">Department:</label>
                                    <input type="text" name="department" 
class="form-control" v-model="fillTask.department"/>
                                    <span v-
if="formErrorsUpdate['department']" class="error text-danger">@{{ 
formErrorsUpdate['department'] }}</span>
                                </div>

                                    <br></br

                                <div class="form-group">
                                    <button type="submit" class="btn btn-
success">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>