CODEWITHSUNDEEP
javascriptvue.js
user1525612
user1525612

Reputation: 1994

Simple Vue Axios example from docs, but using a component

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

Upvotes: 1

Views: 79

Answers (1)

Phil
Phil

Reputation: 164733

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()
}

Upvotes: 2

Related Questions