Custom actions not receiving URL params

Hi,

I can’t get custom actions on a resource to work correctly. I have the following resources.js:

import Vue from 'vue'

export var user = Vue.resource('/api/user', {}, {
  getCharacters: { method: 'GET', url: '/api/user/characters' }
})

export var character = Vue.resource(null, {}, {
  index: { method: 'GET', url: '/api/character' },
  search: { method: 'POST', url: '/api/character/search' },
  add: { method: 'POST', url: '/api/character' },
  verify: { method: 'POST', url: '/api/character{/id}/verify' },
  setMain: { method: 'POST', url: '/api/character{/id}/set-main' },
  remove: { method: 'DELETE', url: '/api/character{/id}' }
})

I’m importing it in a component and using it like this:

character.setMain({ id: this.character.id }).then(response => {
  ...
}, (response) => {
  ...
})

But this results in a request to /api/character/set-main, whereas it should be /api/character/559460/set-main. I’ve tried changing the URL structure to place the ID param at the end - same result. Also tried using the example given in the docs:

var customActions = {
  foo: {method: 'GET', url: 'someItem/foo{/id}'},
  setMain: {method: 'POST', url: 'someItem/bar{/id}'}
}

export var character = Vue.resource('someItem{/id}', {}, customActions)

Same result. This is on vue-resource 1.2.0.

[gabrielaraujof]

I found out what was happening @Riari. The actual call should be

character.setMain({ id: this.character.id }, {}).then(response => {
  ...
}, (response) => {
  ...
})

It is because if you only pass one parameter in, the resource will threat it like a body object for any method that uses the HTTP verbs POST, PUT, PATCH. Only if you pass two objects in, it will threat the first one as a params object.

I wonder if there is a better approach to this because it seems to me a little confusing, specially when the docs shows a wrong example.

[Noctsyndrome]

Hi, I get the same issue for my current project. When using post/put method, the ‘id’ param become a request payload. I fix this by add ‘{}’ after the url param, like character.setMain( { id: id }, {} ).then()… try this out.