我已经使用laravel 9和vuejs 3在模型中创建了一个表单,并在页面上为crud操作创建了一个表。如果我提交数据,它会插入数据库并关闭模型。
但我尝试在提交表单后刷新表,但页面没有刷新,提交表单后页面没有刷新。我需要帮助来修复它。
代码如下所示。所有代码都在同一页上。
// script part
const saveAccount = () => {
const formData = new FormData()
formData.append('name',form.value.name)
formData.append('description',form.value.description)
axios.post("/api/cashAccount/cashAccountStore",formData)
.then((respose)=>{
form.value.name='',
form.value.description=''
toast.fire({
icon:"success",
title:"Account Added Successfully"
})
// I tried this method to refresh
$('#account-table').load(location.href + " #account-table");
})
.catch((error) => {
})
}
表代码如下所示。
<table id="example1" class="table table-striped table-bordered mt-2 ml-2 mr-2 col-11">
<thead>
<tr>
<th></th>
<th>Created on</th>
<th>Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="account in accounts" :key="account.id" v-if="accounts.length > 0">
<td><input type="checkbox" name="" id=""></td>
<td>{{ account.created_at }}</td>
<td>{{ account.name }}</td>
<td>{{ account.description }}</td>
<td><button class="btn btn-warning"><i class="far fa-edit" aria-hidden="true"></i></button> |
<button class="btn btn-danger"><i class="far fa-trash-alt"></i></button></td>
</tr>
<tr class="account-table" v-else>
<td></td>
<td></td>
<td><div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>No Account Found</td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Created on</th>
<th>Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
型号代码如下
<div class="modal fade" id="modal-cashAcc">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<h4 class="modal-title text-center">Add New Cash Account</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputBorderWidth2">Account Name</label>
<input type="text" class="form-control form-control-border border-width-2 text-danger text-lg" id="name" placeholder="Account Name" v-model="form.name">
</div>
<div class="form-group">
<label for="exampleInputBorderWidth2">Account Description</label>
<input type="text" class="form-control form-control-border border-width-2 text-primary text-lg" id="name" placeholder="Account Description" v-model="form.description">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" @click="saveAccount()" data-dismiss="modal">Save</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
1条答案
按热度按时间yrwegjxp1#
您不需要jquery;为了能够在将数据发送到后端之后更新
accounts
数组,在then(...
中,您只需要将该项推送到数组中。您已经在本地拥有了名称和描述,更好的解决方案是同时获取
created_at
,因此我将从后端返回插入的对象本身,因此在前端,您只需将从后端接收的response.data
推送到accounts
数组。