Simple Vue Axios example from docs, but using a component

Question

This is probably a very silly question, but believe me I have tried hard to figure it out, to no avail.

I have an appService.js file where I call an API like so:

import axios from 'axios'
axios.defaults.baseURL = 'https://www.alphavantage.co'

const appService = {
    getPosts() {
            axios.get(`/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=5min&apikey=xxx`)
            .then(response => this.info = response)
    }
}

export default appService

and then I have a Vue component (Stocks.vue) where I want to display {{ info }} like so:

<template>
  <div>
    <h4>{{ info }}</h4>
  </div>
</template>

<script>
import appService from '../app.service.js'
export default {
  name: 'Stocks',
  props: {
    msg: String
  },
}
</script>

I literally just want to dump everything I get from the API in that tag. I will figure the rest out later.

I am basically doing the simple Axios example from the Vue docs, but using a component instead. (https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#Base-Example)

Hope that makes sense!

Thanks in advance

You're importing the appService file but you're not doing anything with it. You need to make a call to getPosts and then use the response to set the data for {{info}}. — Charlie Stanard
– Charlie Stanard, Commented Mar 14, 2019 at 22:38

Phil · Accepted Answer · 2019-03-14 22:48:31Z

2

You'll need to change your appService function to return the promise created by axios.get. You also can't assign values to this in the function, but you can in your component.

export default {
  getPosts () {
    return axios.get('/query', {
      params: { // dealing with a params object is easier IMO
        function: 'TIME_SERIES_INTRADAY',
        symbol: 'MSFT',
        interval: '5min',
        apikey: 'xxx'
      }
    })
  }
}

then in your component, perhaps in the created hook

data () {
  return {
    info: {} // or some other appropriate default value
  }
},
async created () {
  this.info = await appService.getPosts()
}

edited Mar 14, 2019 at 22:48

answered Mar 14, 2019 at 22:40

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Simple Vue Axios example from docs, but using a component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related