Question

我有一个叫vue的函数，它被称为fetchReport

那很好，我还有另外2个函数要更改选择元素，这些函数也可以工作，但这是我的问题：

当前，如果我调用handleTypeSelect或handleLocationSelect，则它们都会提交正确的值，但是每次都会在fetchReport调用中将它们作为itemType提交。我假设这是因为它们只发送一个参数值，而这是第一个参数。

如何修改此设置，以便handleTypeSelect将值发送为itemType，而handleLocationSelect将值发送为locationID？

created() {
    this.fetchReport();
},
methods: {
  fetchReport(itemType = '3', locationID = '10', startDate = new Date().toISOString().substring(0,10), endDate = new Date().toISOString().substring(0,10)) {
      axios.get('/report/assets/data', {params:{itemType: itemType, startDate: startDate, endDate: endDate, locationID: locationID}})
      .then(response => {
        // handle success
        console.log(response.data)
        this.rows = response.data
      })
  },
  handleTypeSelect() {
      this.fetchReport(itemTypes.value);
  },
  handleLocationSelect() {
      this.fetchReport(itemLocations.value);
  }
}

Answer 1

重构fetchReport的参数：

不要采用一系列参数(arg1, arg2, arg3)，而是采用单个参数(arg)

此arg参数将是一个对象，其中包括您需要作为参数的所有属性。作为后续操作，将默认值移到函数内部。

您的结果将是：

  fetchReport(myParams) {
      const defaults = { itemType: '3', locationID: '10', .... }; // list all other defaults, same as previous arguments
      const params = Object.assign(defaults, myParams);
      axios.get('/report/assets/data', { params })
      .then(response => {
        // handle success
        console.log(response.data)
        this.rows = response.data
      })
  },

然后，当您需要调用fetchReport时：

fetchReport({ itemType: 'MyValue' })

fetchReport({ locationID: 'MyValue' })

当您不想考虑参数顺序时，这是处理具有多个参数的函数的最佳实践方式

Answer 2

使用undefined传递第一个参数。

 handleLocationSelect() {
      this.fetchReport(undefined, itemLocations.value);
  }

Answer 3

您需要传递两个参数。

使用void来获取值undefined，因为在较旧的浏览器中window.undefined可以是changed。

handleLocationSelect() {
    this.fetchReport(void, itemLocations.value);
}

Vue发送参数值，声明将哪个参数发送为

3 个答案: