删除后自动重新加载列表项（Vue.js）

Question

问题

我有一个呈现项目列表并提供删除项目的选项的视图。我的删除方法效果很好 - 当我手动刷新页面时，该项目消失了。但删除项目后项目列表不会自动重新加载。

尝试的解决方案

阅读this question后，我尝试添加project的key属性。由于 Vue 抱怨 key 最好是字符串或整数，我将 key 更改为 project.id。但是，这些都没有解决我的问题。

模板

<el-col :span="8" v-for="project in projects" :key="project.id">
      <el-card class="project-card">
        <!-- Click to navigate to project -->
        <div @click='navigateProject(project)' class="project-card-inner">
          <!-- Dummy data -->
          <br><em>{{ 'Project ' + project.id }}</em>
        </div>
        <!-- Delete project -->
        <div @click='deleteProject(project)' class="el-icon-delete"></div>
      </el-card>
</el-col>

脚本

// under 'methods'
deleteProject(project) {
  this.$confirm('Are you sure you want to delete this project? '
    + 'This cannot be undone.', 'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        const request_url = this.url + project.id + '/';
        this.$message({
          type: 'success',
          message: 'Project deleted.'
        });
        return axios({
          method: 'delete',
          url: request_url,
          id: project.id
        }).then(response => {
          console.log(response);
        }).catch(function (error) {
          console.log(error);
        });
      }).catch(() => {
        return false;
      })
}

Answer 1

看起来你只是在删除服务器上的项目，而 Vue 没有办法知道这一点。我建议在您发送 axios 请求后，您还可以删除本地状态的项目。像这样的：

deleteProject(project) {
  this.$confirm('Are you sure you want to delete this project? '
    + 'This cannot be undone.', 'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        const request_url = this.url + project.id + '/';
        this.$message({
          type: 'success',
          message: 'Project deleted.'
        });
        return axios({
          method: 'delete',
          url: request_url,
          id: project.id
        }).then(response => {
          // Logic to delete local state
          const projectIndex = this.projects.findIndex(p => p.id === project.id)
          this.projects.splice(projectIndex, 1)
        }).catch(function (error) {
          console.log(error);
        });
      }).catch(() => {
        return false;
      })
}