Vue.js: vue-resource calling resource.save() with path parameter

Question

I defined a vue-resource:

resources.js:

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource);

export const Team = Vue.resource('team{/id}{/action}');

So, then if I call the get method on that resource:

api = require('.api/resources')
api.Team.get({
    id: 3233,
    action: 'details',
}).then(function(response) {
    // ....
});

This ajax call makes a request to:

/team/3233/details

But when I use .update or .save rather than .get, the request url is not as expect:

api = require('.api/resources')
api.Team.update({
    id: 3233,
    action: 'details',
}).then(function(response) {
    // ....
});

I only send a request to /team with all parameters transferred in the request body.

How can I specifies the url parameters in such a .save or .update ajax call?

Alfred Huang · Accepted Answer · 2016-05-05 08:32:55Z

Well simply adding a second parameter on the method call is ok:

api = require('.api/resources')
api.Team.update({
    id: 3233,
    action: 'details',
}, {}).then(function(response) {
    // ....
});

When the vue-resource calling ajax on a method with body, it accepts either one or two data parameter.

If one single parameter is given, it was treated as the body payload.

If two parameters are given, the first is the routing parameter, while the second one is the body payload.

So, if want to specify the routing parameter, just give an empty object as the second parameter.

1 Answer 1