I am struggling with a component that should use axios to fetch some data for my page, but the request is not being made. Below is the code snippet:
Snippet from App.vue:
<template>
<div id="app">
<Prices/>
</div>
</template>
<script>
import Prices from './components/Prices.vue'
export default {
name: 'app',
components: {
Prices
}
}
</script>
Snippet from Prices.vue:
<template>
<div>
<p>{{ info }}</p>
</div>
</template>
<script>
export default {
name: 'Prices',
props: {
info: String
}
}
</script>
Snippet from main.js:
import Vue from 'vue/dist/vue.js';
import App from './App.vue'
import './registerServiceWorker'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
}
}).$mount('#app')
This is my first app using Vue.js and I am unsure of what is causing the issue. Any guidance on how to resolve this problem would be greatly appreciated.