Vue中如何通过变量动态发起关联Provider_id的查询请求

AI 小北

2026-8-17

Vue项目动态传递provider_id实现查询的修复方案

你的代码里有两个关键问题导致动态传参失败，直接按下面的步骤修改即可：

1. 修复axios请求的语法错误

你当前的axios.get写法存在语法错误：URL后面多了一个右括号，而且没必要在URL里手动拼接provider_id——axios会自动把params对象里的参数拼接到请求URL后面，重复拼接反而会引发问题。

2. 修正变量作用域与引用问题

在函数开头定义const self = this;，确保then回调里能正确访问组件实例的属性
组件内的data属性（比如this.searchC.id、this.date）要保留this.前缀；如果是局部变量，要确保已经正确定义或传入

修正后的完整代码

ConsultPurchasesProv() {
  const self = this; // 先定义self，确保回调中能访问组件实例
  this.axios
    .get("/api/TSO-consult-purchases-of-prov", {
      params: {
        selection_id: selection_id,
        type: type,
        provider_id: provider_id, // 这里动态传入provider_id变量
        nameprov: this.searchC.id,
        brand_id: brand_id,
        user_id: user_id,
        purchase_id: purchase_id,
        date: this.date,
        date2: this.date2,
        type: self.status,
        invoice: self.invoice,
      },
    })
    .then(function (response) {
      if (response.data.status == "200") {
        self.purchasesItems = response.data.purchaseorders;
        self.totalExpensesMonth = _.sumBy(
          self.purchasesItems,
          function (o) {
            return o.total;
          }
        );
        self.month = response.data.month;
        self.year = response.data.year;
      }
    });
}