Vuetable-2: Function fetch not working as intended when using POST method

Created on 19 Feb 2018  路  3Comments  路  Source: ratiw/vuetable-2

When placing a POST request with axios the second parameter is the JSON body object, so the options are not being passed correctly.

https://github.com/ratiw/vuetable-2/blob/080623e3888014525bb44ade09b013e9eec02d08/src/components/Vuetable.vue#L730-L732

This could be corrected as:

    if (this.httpFetch) return this.httpFetch(apiUrl, httpOptions)
    else if (this.httpMethod === 'get') return axios.get(apiUrl, httpOptions)
    else { // Is a POST request
        let params = httpOptions.params
        delete httpOptions.params
        return axios.post(apiUrl, params, httpOptions)
    }

Most helpful comment

@rribou I'm looking for a cleaner way to fix this. In the meantime, you should be able to use http-fetch prop to assign your own AJAX function.

Something similar to this:

<template>
  <vuetable ref="vuetable"
    api-url="..."
    :fields="..."
    :http-fetch="myFetch"
  ></vuetable>
</template>
<script>
  import axios from 'axios'
  //..
  methods: {
    //..
    myFetch (apiUrl, httpOptions) {
      let data = { 
        // --- your key-value pair of data here --- 
      }
      return axios.post(apiUrl, data, httpOptions)
    }
  }
</script>

All 3 comments

Thanks, @mondul. Will checkout your PR later.

Can you provide a workaround until the correction is released ?

@rribou I'm looking for a cleaner way to fix this. In the meantime, you should be able to use http-fetch prop to assign your own AJAX function.

Something similar to this:

<template>
  <vuetable ref="vuetable"
    api-url="..."
    :fields="..."
    :http-fetch="myFetch"
  ></vuetable>
</template>
<script>
  import axios from 'axios'
  //..
  methods: {
    //..
    myFetch (apiUrl, httpOptions) {
      let data = { 
        // --- your key-value pair of data here --- 
      }
      return axios.post(apiUrl, data, httpOptions)
    }
  }
</script>
Was this page helpful?
0 / 5 - 0 ratings