编辑记录后如何重新加载Vue表组件？

Question

编辑记录后，我试图用新数据重新加载vue表组件，但是仅在重新加载整页后才更新表，一旦记录被编辑，我将使用边栏窗口组件来编辑表记录。该表需要更新。任何人都可以使用代码来帮助解决此问题。

我的表格组件

  <template slot="thead">
    <vs-th sort-key="id">Id</vs-th>
    <vs-th sort-key="name">Name</vs-th>
    <vs-th sort-key="phone_number">Phone No</vs-th>
    <vs-th sort-key="location">Location</vs-th>
  </template>

  <template slot-scope="{data}">
      <tbody>
        <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">

           <vs-td>
            <p class="font-medium truncate">{{ tr.id }}</p>
          </vs-td>  

         <vs-td>
            <p class="font-medium truncate">{{ tr.first_name }}</p>
          </vs-td>  


          <vs-td>
          <p class="font-medium truncate">{{ tr.phone_number}}</p>
          </vs-td>

          <vs-td>
          <p class="font-medium truncate">{{ tr.location}}</p>
          </vs-td>

       </vs-tr>
      </tbody>
    </template>

在模式组件中编辑记录的方法

  editData () {
  this.$validator.validateAll()
      let obj = {
        id: this.dataId,
        first_name: this.datafirst_name,
        phone_number: this.dataphone_number,
        location: this.datalocation,

      }
       this.$vs.loading();

        this.$store.dispatch("userManagement/updateLead", obj)

     .then(() => {
      //  location.reload();

       this.$vs.loading.close();

       alert('Updated');            
      })
      .catch(error => {
        console.log(error);
        this.$vs.loading.close();
         alert('Update error');
      });
      this.$emit('closeSidebar')
      this.$validator.reset()
      this.resetFields();


},

Answer 1

您不需要重新加载所有页面或表格。首先-最好使用id作为键，而不是索引（它将更清楚地标识可编辑的行）。然后，您可以发出编辑事件并更改表中的项目：