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

Question

更新数据后如何不刷新或重新加载页面？ 我正在使用 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
    }
}

Answer 1

请下次添加所有相关代码，让我们知道您想要实现什么。

首先，请注意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>

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

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

   编辑：请注意，上面的代码是关于如何使用干净代码的建议。 无论如何，对于您的问题，您可以通过执行更新您的 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)
               })
   

Answer 2

在更新删除

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>

Answer 3

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