axios 在laravel 9 & vuejs 3中提交表单后刷新表格

d6kp6zgx  于 2023-01-09  发布在  iOS
关注(0)|答案(1)|浏览(166)

我已经使用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">&times;</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>
yrwegjxp

yrwegjxp1#

您不需要jquery;为了能够在将数据发送到后端之后更新accounts数组,在then(...中,您只需要将该项推送到数组中。

this.accounts.push({
    name: ..., 
    description: ...
})

您已经在本地拥有了名称和描述,更好的解决方案是同时获取created_at,因此我将从后端返回插入的对象本身,因此在前端,您只需将从后端接收的response.data推送到accounts数组。

相关问题