Vuetable-2: append-params - nested object with arrays break on v1.6.0

Created on 16 May 2017  路  3Comments  路  Source: ratiw/vuetable-2

I have a nested filters object that are previously working on v1.3.0.

let filters= {
  foo: 'bar',
  search: {
       keys: ['firstname', 'lastname'],
       value: 'Chris'
   }
}

after assigning this 'filters' object to the append-params, the query string parameter was generated differently on the ff versions:

v1.3.0:

foo:bar
search[keys][]:firstname
search[keys][]:lastname
search[value]:Chris

Generated Url: &foo=bar&search%5Bkeys%5D%5B%5D=firstname&search%5Bkeys%5D%5B%5D=lastname&search%5Bvalue%5D=Chris

v1.6.0:

foo:bar
search:{"keys":["firstname","lastname"],"value":"Chris"}

Generated url: &foo=bar&search=%7B%22keys%22:[%22firstname%22,%22email%22],%22value%22:%22Chris%22%7D

Is this the expected behavior?

Most helpful comment

Hello. Firstly i want thank you @ratiw very much for such great component.
I was faced with same issue. In my case i build CMS and there are exists API for ajax requests. To each request i should attach some special data, which is object with nested data. But when i try do that with vuetable, i was noticed that object was serialized to JSON string. After looking this issue i was look into axiox issues and find solution here - https://github.com/mzabriskie/axios/issues/738
I just have replaced axios serializer with jQuery one, which also in my project.
Just set "http-options" property to:

{
      paramsSerializer: function(params) {
              return jQuery.param(params);
      }
}

All 3 comments

@chrislandeza This is probably caused by replacing vue-resource with axios, which handles http parameters differently. Since, we are going to stick with axios for quite sometime, I think it's worth modifying the code to handle it accordingly. But I'm open to any suggestion. Sorry for the trouble though.

Hello. Firstly i want thank you @ratiw very much for such great component.
I was faced with same issue. In my case i build CMS and there are exists API for ajax requests. To each request i should attach some special data, which is object with nested data. But when i try do that with vuetable, i was noticed that object was serialized to JSON string. After looking this issue i was look into axiox issues and find solution here - https://github.com/mzabriskie/axios/issues/738
I just have replaced axios serializer with jQuery one, which also in my project.
Just set "http-options" property to:

{
      paramsSerializer: function(params) {
              return jQuery.param(params);
      }
}

@ratiw - Closing this issue now as @Zaporozhec7 solution solved the problem.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

larryu picture larryu  路  6Comments

legreco picture legreco  路  5Comments

mannyyang picture mannyyang  路  3Comments

PrimozRome picture PrimozRome  路  5Comments

anselmobattisti picture anselmobattisti  路  5Comments