有没有办法在更新数据后不刷新页面?Laravel 8和Vue

如何在更新数据后不刷新或重新加载页面？我正在使用Modal编辑数据，但问题是页面在保存后仍会刷新，有其他方法可以解决这个问题吗？

<button class="btn btn-warning" @click="edit(item)"><i class="fa fa-edit"></i></button>

模式：

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Employee Edit</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" v-model="formEdit.name">
</div>
......

脚本：(edit用于显示数据，update用于更新数据(

edit(item){
const vm = this;
vm.formEdit.name = item.name;
vm.formEdit.address = item.address;
vm.formEdit.position = item.position;
this.selectedId = item.id;
$('#editModal').modal('show');
},
update(){
const vm = this;
axios.put(`/employees/${vm.selectedId}`, this.formEdit)
.then(function (response){
alert('Employee Updated')
location.reload();
})
.catch(function (error){
console.log(error);
});
}

这是为Laravel 8和Vue

员工组件：

props: ['employee'],
data() {
return {
employeeList: this.employee,
form:{
name: null,
address: null,
position: null
},
formEdit:{
name: null,
address: null,
position: null
},
selectedId: null
}
}

下次请添加所有相关代码，让我们知道您正在努力实现什么。

首先，请注意，props提供的数据不应因反模式而发生突变。说你必须在你的组件中创建一个深度副本才能更改其内容。

假设您只在一个组件中工作，其中您的表列出了所有员工，那么您可以执行这样的操作。

<template>
<div>
<table>
<tr v-for="item in employeeList" :key="item.id">
<td>name: {{ item.name }}</td>
<td>address : {{ item.address  }}</td>
<td>position : {{ item.position  }}</td>
<td><button class="btn btn-warning" @click="edit(item)"><i class="fa fa-edit"></i></button></td>
</tr>
</table>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Employee Edit</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" v-model="form.name">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" @click="update()">Save</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
employee: Array
},
data: () => ({
employeeList: [],
form: {}
}),
mounted () {
// Since changing a props is anti-pattern, we use a local data which can be manipulated
this.employeeList = [...this.employee]
},
methods: {
edit(item){
// Assign the clicked item to form data
this.form = item
$('#editModal').modal('show')
},
update(){
axios.put(`/employees/${this.form.id}`, this.form)
.then(function (response){
alert('Employee Updated') 
// Find the employee index in employeeList array
const updatedEmployee = response.data
const index = this.employeeList.findIndex(x => x.id === updatedEmployee.id)
// If employee is found, then proceed to update the array object by using ES6 spread operator
if (index !== -1) {
this.employeeList = [...this.employeeList.slice(0, index), { ...updatedEmployee}, ...this.employeeList.slice(index + 1)]
}             
})
.catch(function (error){
console.log(error)
})
}
}
}
</script>

代码是不言自明的，但以防万一，我会澄清一点：

因为我们不能更改道具employee，所以我们在mounted()钩子中使用ES6扩展运算符将数组复制到本地数据
单击按钮编辑员工时，会将item分配给form数据。现在您有了form，所有员工数据都可以在任何地方显示/更改
一旦API响应成功，由于您正在更新，您将查找数组对象并替换整个数组，以避免反应性问题。如果你正在添加一个新的，你可以通过做this.employeeList.push(updatedEmployee)来推送它

EDIT：请注意，上面的代码是关于如何使用干净代码的建议。无论如何，就你的问题而言，你可以通过在axios响应中更新你的阵列

.then(function (response){
alert('Employee Updated') 
// Find the employee index in employeeList array
const updatedEmployee = response.data
const index = this.employeeList.findIndex(x => x.id === updatedEmployee.id)
// If employee is found, then proceed to update the array object by using ES6 spread operator
if (index !== -1) {
this.employeeList = [...this.employeeList.slice(0, index), { ...updatedEmployee}, ...this.employeeList.slice(index + 1)]
}             
})
.catch(function (error){
console.log(error)
})

更新期间删除

location.reload();

并添加以下代码

$('#editModal').modal('hide');

要按照程序显示数据，请更新从响应接收的数据：

updateStudent(){
axios.put('update_student',{
id:this.id,
name:this.editname,
email:this.editemail,
phone:this.editphone,
})
.then(response=>console.log(response));
axios.get('all_students')
.then(response => {
this.data = response.data;
});
},

您可以显示更新后的数据，如以下代码：

<tr v-for="row in data"> 
<th scope="row">1</th> 
<td>{{ row.name }}</td> 
</tr>

让我们在数据中创建一个项来分配我们从道具中获得的值。接下来，让我们将props数据分配给创建的元素。页面刷新问题将得到解决。

相关内容

最新更新

热门标签：