代码之家 › 专栏 › 技术社区 › MoreScratch

Vue.js组件不会渲染

vue-component vuejs2 vue.js javascript

MoreScratch · 技术社区 · 7 年前

我有一个使用 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的新手,这是我的第一个应用程序,我不确定为了让它正常工作我缺少了什么。任何指点都将不胜感激。

2 回复 | 直到 7 年前

Boussadjra Brahim 7 年前

您应该指定 data 性质 response 给你 info

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

并将该财产转让通过 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)

Boussadjra Brahim 7 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前