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

1

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

  • 0
    я обновил свой ответ и исправил проблему, мне не хватало vue-axios, есть работающее решение codesandbox.io/s/wonw76ml47
  • 0
    Отлично! Это сработало.
Показать ещё 1 комментарий
Теги:
vue.js
vuejs2
vue-component

2 ответа

1
Лучший ответ

Вам следует присвоить свойству 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)
Поделиться
  • 0
    Теперь я получаю следующую ошибку: [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined" . Кажется, проблема с запросом GET. Идеи?
  • 0
    Вы установили this.axios вместо axios и Vue.use(axios) в main.js ?
Показать ещё 2 комментария
0

Вы должны предоставить 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>
Поделиться
  • 0
    Это не будет работать
  • 0
    посмотрите на мой ответ и сравните, я добавил несколько комментариев в коде
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню