Хобрук: Ваш путь к мастерству в программировании

Uncaught TypeError: невозможно прочитать свойство get of undefined в VueJs

У меня есть следующий код

<div id="vue-instance">

</div>

JS

var vm = new Vue({
  el: '#vue-instance',
  data: {
  },
  ready:function(){
    this.loadCountries();
  },
  methods:{
        loadCountries(){
            this.$http.get('https://restcountries.eu/rest/v1/all',function(data){
                console.log(data);
          })
      }
  }
});

Когда я запускаю приведенный выше код, он дает мне следующую ошибку

Uncaught TypeError: невозможно прочитать свойство get of undefined

У меня есть скрипка

JsFiddle

Помощь будет очень признательна

javascript vuejs2
22.02.2017

Ответы:


1

$http.get взят из Vue Resource. Убедитесь, что вы правильно это делаете, добавив vue-resource в свой package.json, установите его через npm install и в коде:

var Vue = require('vue');

Vue.use(require('vue-resource'));

Чтобы использовать это в скрипте, вам нужно добавить vue-resource cdn link во внешних ресурсах и используйте в коде следующее:

Vue.use(VueResource)

См. Рабочую демонстрацию: https://jsfiddle.net/49gptnad/187/

22.02.2017
  • как это сделать на скрипке? Все, что я хочу сделать, это вызов Ajax, есть ли другой способ? 22.02.2017
  • Я по-прежнему ничего не вижу в консоли, хотя вижу, что ошибка исчезла, и проверяю вручную, URL-адрес работает нормально 23.02.2017
  • @Vikram В вашем коде было еще несколько ошибок, см. Рабочее решение здесь. Дайте мне знать, если у вас возникнут какие-либо вопросы. 23.02.2017
  • было бы хорошо, если бы вы также могли обновить эту ссылку в ответе. Чтобы это было полезно для других людей 23.02.2017
  • @Saurabh Может быть, ты сможешь мне помочь. Посмотрите на это: stackoverflow.com/questions/52529345/ 27.09.2018

    • 2

    Чтобы использовать $ http, сначала необходимо установить промежуточное ПО vue-resource. Вы можете использовать следующую команду для его установки.

    npm install vue-resource --save

    После его установки перейдите в файл main.js и импортируйте ресурс vue следующим образом.

    import vueResource from 'vue-resource'

    Теперь он импортирован, поэтому нам просто нужно вызвать метод use в Vue для работы с этим промежуточным программным обеспечением. Вызвать метод use можно следующим образом.

    Vue.use(vueResource)
    09.11.2017

    3

    Поскольку у вас нет плагина для vue-resource, ваш this. $ Http не определен. Чтобы добавить Vue-ресурс в js-fiddle, добавьте https://cdn.jsdelivr.net/g/[email protected],[email protected] в раздел внешних скриптов.

    22.02.2017

    4

    Я исправил эту проблему в следующем режиме:

    npm install bootstrap-vue --save
npm install vue-resource --save

    в main.js

    import Vue from './bootstrap'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

    создать bootstrap.js

    import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export { Vue }

    В App.vue

    this.$http.get('/api/module/all').then(...
    15.11.2017

    5

    С октября 2019 года я использовал другой способ. Сначала я установил с помощью NPM вот так

    npm install axios --save

    Я использовал это ниже позже, и сделав это ниже, я избавился от ошибки.

    import  axios  from 'axios';
    26.10.2019
    Новые материалы
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..
    Как я опубликовал свое первое приложение в App Store в 13 лет
    Как все началось Все началось три года назад летом после моего четвертого класса в начальной школе. Для меня, четвертого класса, лето кажется бесконечным, пока оно не закончится, и мой отец..