У меня есть компонент, который использует axios
для ввода некоторых данных на мою страницу. Запрос данных никогда не производится. Вот мой код:
В App.vue:
<template>
<div id="app">
<Prices/>
</div>
</template>
<script>
import Prices from './components/Prices.vue'
export default {
name: 'app',
components: {
Prices
}
}
</script>
В ценах.
<template>
<div>
<p>{{ info }}</p>
</div>
</template>
<script>
export default {
name: 'Prices',
props: {
info: String
}
}
</script>
В 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')
Я новичок в Vue.js, это мое первое приложение, и я не уверен, что мне не хватает, чтобы заставить это работать. Любые указатели будут оценены.
Вам следует присвоить свойству data
response
свойству info
следующее:
.then(response => (this.info = response.data))
и передать эту info
о свойствах через props
дочернему компоненту:
<Prices :info='info'/>
и измените app.vue
на это:
<template>
<div id="app">
<Prices :info='info'/>
</div>
</template>
<script>
import Prices from './components/Prices.vue'
export default {
name: 'app',
data () {
return {
info: null
}
},
components: {
Prices
},
mounted () {
this.axios //<--- use this.axios instead of 'axios'
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response.data))
}
}
</script>
и main.js
:
import Vue from 'vue/dist/vue.js';
import App from './App.vue'
import './registerServiceWorker'
import axios from 'axios';
import vueAxios from 'vue-axios';
Vue.use(vueAxios,axios); //add Vue.use(axios)
Vue.config.productionTip = false new Vue({
render: h => h(App),
data() {
return {}
}
}).$mount('#app')
Заметка
Вы также должны установить vue-axios
через:
npm install --save vue-axios
и используйте его с такими axios
как:
import axios from 'axios';
import vueAxios from 'vue-axios';
Vue.use(vueAxios,axios); //add Vue.use(axios)
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"
. Кажется, проблема с запросом GET. Идеи?
this.axios
вместо axios
и Vue.use(axios)
в main.js
?
Вы должны предоставить props
удалить из main.js
задачу извлечения и сделать это в компоненте приложения
<template>
<div id="app">
<Prices :info="info"/>
</div>
</template>
<script>
import Prices from './components/Prices.vue'
export default {
name: 'app',
data () {
return {
info: null
}
},
components: {
Prices
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response.data))
}
}
</script>