Vue.js删除功能异常：数据库删除后页面未同步更新

首先你的代码存在两处关键问题需要修正：

1. 模板中删除按钮的位置错误 #

当前删除按钮在v-for循环外部，点击时无法获取到对应条目的data.indexing_id，必须把按钮放到循环内部的每个条目容器里：

<div>
  <div v-for="data in indexingList" :key="data.indexing_id">
    <p>{{ data.indexing_name }}</p>
    <p>{{ data.indexing_url }}</p>
    <!-- 将按钮移入循环内部，确保能拿到当前条目的indexing_id -->
    <base-button type="primary" size="sm" @click="deleteIndexing(data.indexing_id)">
      Delete
    </base-button>
  </div>
</div>

2. 删除成功后未更新本地数据 #

目前删除接口调用成功后，没有同步更新本地的indexingList数组，导致页面数据没有变化。提供两种常用修复方案：

方案一：重新拉取完整数据（简单可靠） #

在删除成功的回调里调用getIndexingList()，从服务器重新获取最新的列表数据：

deleteIndexing: function(dVal) {
  let sVal = {};
  sVal.indexing_id = dVal;
  this.api.putData("indexing/" + store.state.journalId + "/deleteindexing", sVal)
    .then((res) => {
        console.log(res.data);
        // 删除成功后重新获取列表，保证数据与服务器完全一致
        this.getIndexingList();
      },
      (error) => {
        console.log(error);
      }
    );
}

方案二：直接操作本地数组（减少请求） #

如果确认删除操作不会有其他并发修改，可以直接过滤本地数组，移除被删除的条目：

deleteIndexing: function(dVal) {
  let sVal = {};
  sVal.indexing_id = dVal;
  this.api.putData("indexing/" + store.state.journalId + "/deleteindexing", sVal)
    .then((res) => {
        console.log(res.data);
        // 过滤掉indexing_id匹配的条目，直接更新本地数据
        this.indexingList = this.indexingList.filter(item => item.indexing_id !== dVal);
      },
      (error) => {
        console.log(error);
      }
    );
}

两种方案各有适用场景：方案一适合数据可能被其他操作修改的复杂场景，能确保数据绝对同步；方案二更高效，适合仅当前操作修改数据的简单场景。

内容的提问来源于stack exchange，提问作者saravana