[Vuejs]-TypeError: Cannot read property 'get' of undefined vue js

by

0👍

✅

Configure vue-resource in a separate file, named plugins/vue-resource.js

const Vue = require('vue');
const Resource = require('vue-resource');

Vue.use(Resource);

Then require the file in your app.js, like so:

require('./plugins/vue-resource.js');

new Vue({
  el: '#vue-app',
  data: {
    articles: ''
  },
  created: function () {
    this.fetchData();
  }, 
  methods: {
    fetchData: function () {
      this
        .$http
        .get('http://localhost/aim-beta/rest/export/json/article',
          function (data) {
            this.articles = data.main.temp;
        })
    }
  }
});

Thus, your new folder structure will be like so:

- index.html
- app.js
+ plugins
  - vue-resource.js

Using native JavaScript Fetch API

// You don't need vue resources!!!
// require('./plugins/vue-resource.js'); 
// Read more about Fetch API: [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch][1]

new Vue({
  el: '#vue-app',
  data: {
    articles: ''
  },
  created: function () {
    this.fetchData();
  }, 
  methods: {
    fetchData: function () {
      fetch('http://localhost/aim-beta/rest/export/json/article', {
        method: 'GET'
      }).then(function(data) {
        console.log(data);
        this.articles = data.main.temp;
      })
    }
  }
});

Leave a comment