Vue.js中使用Axios实现多选行更新功能失败求助

数据老陈

2026-8-6

问题分析与解决方案

核心问题定位

你的批量更新功能失效，最关键的错误是循环中错误地从this.books数组取ID，而非选中的this.singleSelect数组。当前代码里this.books[i]["bookId"]是遍历原书籍列表的索引，和选中项的索引不对应，导致请求的ID错误，无法更新选中的行。

修正后的代码

JavaScript 部分

async updateBooks() {
  if (this.singleSelect.length === 0) return;

  // 用let避免var的异步变量泄漏问题
  for (let i = 0; i < this.singleSelect.length; i++) {
    try {
      const selectedBook = this.singleSelect[i];
      const result = await axios.put(
        `https://localhost:7258/api/Book/${selectedBook.bookId}`,
        { writerId: this.writerId }
      );

      console.log(`书籍ID ${selectedBook.bookId} 更新成功:`, result.data);
      // 可选：更新本地books数组，避免刷新页面
      const bookIndex = this.books.findIndex(book => book.bookId === selectedBook.bookId);
      if (bookIndex !== -1) {
        this.books[bookIndex].writerId = this.writerId;
      }
    } catch (e) {
      console.error(`书籍ID ${selectedBook.bookId} 更新失败:`, e);
      this.$root.SnackbarPage.show({ text: `书籍ID ${selectedBook.bookId} 更新失败！` });
      // 可选：如果不想中断批量更新，不要throw，继续循环
      continue;
    }
  }

  // 所有请求完成后提示成功
  this.$root.SnackbarPage.show({ text: "选中书籍已全部更新！" });
  this.showCard = false; // 关闭弹窗
  this.writerId = ""; // 清空输入框
}