ratiw / vuetable-2

data table simplify! -- datatable component for Vue 2.x. See documentation at
https://vuetable.com
MIT License
2.15k stars 399 forks source link

Function fetch not working as intended when using POST method #388

Open mondul opened 6 years ago

mondul commented 6 years ago

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)
    }
ratiw commented 6 years ago

Thanks, @mondul. Will checkout your PR later.

rribou commented 6 years ago

Can you provide a workaround until the correction is released ?

ratiw commented 6 years ago

@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>