Компонент Vue.js не будет отображаться

Question

У меня есть компонент, который использует axios для ввода некоторых данных на мою страницу.Запрос данных никогда не производится.Вот мой код:

В App.vue:

<template>
  <div id="app">
    <Prices/>
  </div>
</template>

<script>
import Prices from './components/Prices.vue'

export default {
  name: 'app',
  components: {
    Prices
  }
}
</script>

В ценах. Vue:

<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, это мое первое приложение, и я не уверен, что мне не хватает, чтобы заставить это работать.Любые указатели будут оценены.

Answer 1

Вы должны предоставить 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>

Answer 2

Вам следует присвоить 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)