current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite
2

My Vue.js app structure is like so:

/app
    --assets
    --components
        --dashboard.vue
    --filters
    --views
        --dashboard-view.vue
    app.vue
    main.js

In my main.js file I have the snippet of code below to set up vue-resource to make HTTP requests:

Vue.use(require('vue-resource'))

Vue.http.options.root = 'http://localhost:3000/api/v1/'
Vue.http.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('authentication_token')

However, when I try to make an HTTP request in dashboard-view.vue it doesn't listen to the configuration set in main.js.

This is dashboard-view.vue:

<template>
...
</template>

<script>
module.exports = {
  ready: function() {
    this.$http.get('/me', function(data, status, request) {

    })
  }
}
</script>

I'm quite new to Vue.js so help is appreciated on how to structure my app so I can easily send HTTP requests.

Thanks

share|improve this question
    
Are you sure the ready: function is firing after the code in main.js runs? If not, I would add some console.log calls to prove it. – David K. Hess Sep 23 '15 at 0:28
up vote 3 down vote

I was having this same issue. When vue-resource concatenates the root option with the url parameter, it adds a backslash between them by default. If you already have a backslash at the end of your root option or at the beginning of any of your url parameters, it will just skip the concatenation and default to the current root url.

Just change your root option declaration to:

Vue.http.options.root = 'http://localhost:3000/api/v1'

and also change your call in the vue component to:

<template>
...
</template>

<script>
module.exports = {
  ready: function() {
    this.$http.get('me', function(data, status, request) {

    })
  }
}
</script>
share|improve this answer
    
Did my answer help you at all, Noah? – aidangarza Jan 3 at 6:24
    
Helped me - thanks! – Peter Jan 18 at 19:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.