Skip to content
This repository has been archived by the owner on Dec 1, 2023. It is now read-only.

Custom actions not receiving URL params #556

Closed
Riari opened this issue Feb 11, 2017 · 7 comments
Closed

Custom actions not receiving URL params #556

Riari opened this issue Feb 11, 2017 · 7 comments

Comments

@Riari
Copy link

Riari commented Feb 11, 2017

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.

@Noctsyndrome
Copy link

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.

@duy-a
Copy link

duy-a commented Jun 25, 2017

@Riari Hi, just curios, were you able to find a solution to this issue?

@Riari
Copy link
Author

Riari commented Jun 25, 2017

No, sorry. :/

@gabrielaraujof
Copy link
Contributor

I have the same problem. @Riari have you find any workaround for this issue?

@gabrielaraujof
Copy link
Contributor

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.

@Riari
Copy link
Author

Riari commented Oct 26, 2017

Well spotted @gabrielaraujof.

Maybe in a future version, it should simply take one object with optional params and body keys, but in the meantime, it would be nice if the docs were up to date.

@gabrielaraujof
Copy link
Contributor

Yeah, I agree. I can take this

gabrielaraujof added a commit to gabrielaraujof/vue-resource that referenced this issue Oct 26, 2017
Added a note explaining the use of custom actions (POST, PUT, and PATCH) for when passing single object in.

Closes pagekit#556
gabrielaraujof added a commit to gabrielaraujof/vue-resource that referenced this issue Oct 26, 2017
Added a note explaining the use of custom actions (POST, PUT, and PATCH) for when passing single object in.

Closes pagekit#556
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants