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>

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

您应按以下方式将data的{{1}}属性分配给您的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

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>

Vue.js组件无法呈现

2 个答案: