Не работают API в VUE js, как исправить?

Question

[Константин]

Приветствую, второй день бьюсь на подключением API к VUE.

По мотивам документации https://ru.vuejs.org/v2/cookbook/using-axios-to-co...

Добавил код :

Vue.config.productionTip = false

new Vue({
  router,
  store,

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

В нужное место добавил

<div id="app">
  {{ info }}
</div>

В консоли должен получить ответ, что все окей. Но ошибка:



До этого вчера пробывал подключаться по урокам через VUE-resource та же ошибка......

Comments

[alex]

подключением API к VUE

лол што?

Но ошибка

где вы импортите axios?

[Константин]

Вверху импорт

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'
import axios from 'axios'




Vue.use(Vuetify, axios)




Vue.config.productionTip = false

new Vue({
  router,
  store,

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

[alex]

Константин, странно не должно быть такой ошибки, вы его установили?

Vue.use(Vuetify, axios)axios тут не нужен. в .use() вторым аргументом конфиги передаются для плагина

[Константин]

Да через терминал установил. Есть ли команда для терминала которой я могу посмотреть установилось ли и какая Версия?

[alex]

Константин, npm list --depth=0

[Andrey Suha]

Константин, можно ещё в package.json посмотреть

[Константин]

Alex, andreysuha, только добрался до пк:

1) Проверил установлен ли AXIOS



2) Судя по скрину не установился почему-то, устанавливаю заново:



3) После установки опять ввел проверку что установлено, всплыли ошибки. Не понимаю почему не становится этот Axios

[Константин]

Хотя стоп, появилось в

"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.6.5",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuetify": "^1.5.14",
"vuex": "^3.0.1"

[Andrey Suha]

Константин, судя по ошибкам у Вас не все зависимости подтянулись. Можно попробовать удалить папку node_modules и выполнить npm i

[Константин]

И ошибка в консоле:

[Vue warn]: Property or method "info" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declari...

found in

---> at src/components/Ads/NewAdd.vue


at src/App.vue

[Константин]

andreysuha, пробую, бекап сделаю.

[Andrey Suha]

Константин, бекап чего?

[alex]

Константин, попробуйте 0.18.1 версию axios установть. так же почистите кэш npm npm cache clean возможно с флагом --force. удалите папку node_modules и заного все установите. обновите node.js. попробуйте вместо npm воспользовться yarn. и вообще юзайте vue-cli за вас там настроено уже все(хотя это не имеет отношение к проблеме). я если честно хз в чем проблема.

[Константин]

andreysuha, папки node_modules (я не силен, может и не поможет)

[Andrey Suha]

Константин, не нужно делать его бекап)) все что там храниться устанавливается командой npm i

[Константин]

andreysuha, почистил кэш, удалил папку, установил заново npm i



Затем поставил vue cli 3, зашел в визуальный редактор (vue ui) там проект уже создан, все ок.

Запускаю проект командой npm run serve и ошибка(



В файлы ничего не дописывал... что то упустил я?

[Andrey Suha]

Константин, что показывает node -v и npm -v?

[Константин]

andreysuha,
Заскринил

[Andrey Suha]

Константин, я тоже если честно хз сейчас в чём ошибка... Гляньте в node_modules есть папка .bin?

[alex]

Константин,

проект уже создан

новый проект содздавайте, согласно документации, через vue create

Answer 1

[Andrey Suha]

Нужно установить axios через npm импортировать его в компонент. А то вы хотите вызвать то чего в файле не существует

Comments

[MichaelDychenko]

Добрый день!
Поясните пожалуйста свой комментарий.