Vue.js 中的 $nextTick 和 ref 问题：如何解决 'GET' 请求方法不支持的错误

这段代码展示了在 Vue.js 中使用 $nextTick 和 ref 时遇到的常见问题，以及如何解决 'GET' 请求方法不支持的错误。

代码分析

this.$nextTick(() => {
  if (this.$refs.submitDialog) {
    this.$refs.submitDialog.handleWrite.call(this, row);
  } else {
    console.error('submitDialog ref is not found');
  }
});

http://192.168.1.171/accounting-api/dev-api/taxmanage/reportingCmHealthInsure/

// 为什么id没拿到) Error: Request method 'GET' not supported
/** 修改按钮操作 */
  handleUpdate(row) {
    const id = this.selection.map((item) => item.chiId);
    if ((!row && !id.length) || id.length === 0) {
      this.$message.warning('请先选中要删除的数据项');
      return;
    }
    console.log(this.selection, 'sssss');
    getReportingCmHealthInsure(id).then((response) => {
      this.data = response.data;
      this.acTaxPiIncomeReportingMedicalInsuranceList = response.data.acTaxPiIncomeReportingMedicalInsuranceList;
      this.open = true;
      this.title = '商业健康保险明细编辑';
    });
  },
  handleSelectionChange(selection) {
    this.selection = selection;
    console.log(selection, 'selectionsss');
  },

这段代码中，handleUpdate 函数旨在更新选中数据项。然而，存在以下几个问题:

id 的获取：
- 使用 this.selection.map((item) => item.chiId) 获取 id，这会导致 id 成为一个数组，而不是单个值。如果只需要第一个 chiId，可以使用 this.selection[0].chiId 来获取。
请求方法错误：
- getReportingCmHealthInsure(id) 方法的请求方法可能不支持 'GET'。需要检查该方法的实现，确保使用正确的请求方法（例如 'POST' 或 'PUT'）。
数据选择处理：
- 如果没有选中数据项，代码会显示警告消息，但没有提供 handleDelete 方法的实现。需要添加逻辑来处理这种情况，例如禁用或隐藏更新按钮。

完整解决方案

handleUpdate(row) {
  const id = row ? row.chiId : this.selection[0].chiId;

  if (!id) {
    this.$message.warning('请先选中要删除的数据项');
    return;
  }

  getReportingCmHealthInsure(id).then((response) => {
    this.data = response.data;
    this.acTaxPiIncomeReportingMedicalInsuranceList = response.data.acTaxPiIncomeReportingMedicalInsuranceList;
    this.open = true;
    this.title = '商业健康保险明细编辑';
  });
},
handleSelectionChange(selection) {
  this.selection = selection;
  console.log(selection, 'selectionsss');
},

解释：

id 的获取：使用三元运算符判断 row 是否存在，如果存在，则使用 row.chiId，否则使用第一个选中项的 chiId。
请求方法：需要检查 getReportingCmHealthInsure 方法的实现，确保使用正确的请求方法。
数据选择处理：需要根据你的具体需求添加相应的逻辑来处理没有选中数据项的情况。

总结

通过以上代码优化，可以解决 GET 请求方法不支持的错误，并确保正确获取 id 和处理数据选择问题。请根据你的具体需求调整代码，并确保你的 API 请求方法是正确的。

注意： 这只是一个可能的解决方案，具体取决于你的实际代码和需求。你可能需要根据你的具体情况进行调整。

Vue.js 中的 $nextTick 和 ref 问题：如何解决 'GET' 请求方法不支持的错误