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>

在 Prices.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

您应该将response 的data 属性分配给您的info 属性，如下所示：

 .then(response => (this.info = response.data))

并通过props 将该属性info 传递给子组件：

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

Answer 2

您必须提供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>