Vue resource - dynamically determine http method

Question

I would like to dynamically determine the appropriate http method and make a single api call. However an exception is thrown when I call the method.

I expect that I am doing something wrong rather than this being a vue-resource bug. Would anyone have any advice? Thanks

For example:

let method = this.$http.post

if (this.model.id) {
    method = this.$http.put
}

method(
    this.url,
    this.model,
    options
).then(response => {
    this.$router.push(this.redirect_to)
}).catch(response => {
    console.log(`Error: ${response.statusText}`)
})

A javascript TypeError is thrown with message "this is not a function"

The code below works, but a bit long winded.

if (this.model.id) {
    this.$http.put(
        this.url,
        this.model,
        options
    ).then(response => {
        this.$router.push(this.redirect_to)
    }).catch(response => {
        console.log(`Error: ${response.statusText}`)
    })

} else {
    this.$http.post(
        this.url,
        this.model,
        options
    ).then(response => {
        this.$router.push(this.redirect_to)
    }).catch(response => {
        console.log(`Error: ${response.statusText}`)
    })
}

`let method = this.$http.post` where is this code? In a method? — Bert, Aug 21 '17 at 19:42
Maybe try `let method = (this.model.id) ? 'put' : 'post'; this.$http[method](this.url, this.model, options) ...` — thanksd, Aug 21 '17 at 19:45

score 5 · Accepted Answer · answered Aug 21 '17 at 19:46

5

You need to bind the function to the current context.

let method = this.model.id ? this.$http.put.bind(this) : this.$http.post.bind(this)

Or just use the indexer approach.

let method = this.model.id ? 'put' : 'post'
this.$http[method](...).then(...)

answered Aug 21 '17 at 19:46

Bert

80,741
17
199
164

I like the indexer approach, works great! Thanks again!! – pymarco Aug 21 '17 at 20:25

Vue resource - dynamically determine http method

1 Answers1