Vue sending param value, declaring which param to send as

Question

I have a vue function that I'm calling on page creation called fetchReport

That works fine, and I also have 2 other functions that I'm calling on change of select elements, which work as well, but here's my problem:

Currently, if I call handleTypeSelect or handleLocationSelect, they both submit the correct value but they submit it as itemType in the fetchReport call every time. I"m assuming it's because they only send one parameter value and that's the first parameter.

How can I modify this so that handleTypeSelect sends the value as itemType and handleLocationSelect sends the value as 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);
  }
}

Fabio Lolli · Accepted Answer · 2019-10-18 16:05:08Z

Refactor fetchReport's arguments:

Instead of taking a series of arguments (arg1, arg2, arg3), take a single parameter (arg)

This arg parameter will be an object including all the properties you need as arguments. As a followup, move the default values inside the function.

Result for you would be:

  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
      })
  },

Then, when you need to call fetchReport:

fetchReport({ itemType: 'MyValue' })

fetchReport({ locationID: 'MyValue' })

This is the best practice way of handling functions with multiple parameters when you don't want to think about order of parameters

artoju · Accepted Answer · 2019-10-18 15:52:06Z

0

Use undefined to pass the first parameter.

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

answered Oct 18, 2019 at 15:52

artoju

1,72113 silver badges14 bronze badges

2 Comments

Geoff_S Over a year ago

Won't that mess up the default value of '3' that I have for taskType, and instead send undefined?

Helping hand Over a year ago

@TomN. It won't . Default 3 will be used

Andreas · Accepted Answer · 2019-10-18 16:04:52Z

0

You need to pass two params.

Use void to get the value undefined, because window.undefined can be changed in older browsers.

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

answered Oct 18, 2019 at 16:04

Andreas

4756 silver badges30 bronze badges

Collectives™ on Stack Overflow

Vue sending param value, declaring which param to send as

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related