JavaEar 专注于收集分享传播有价值的技术资料

TypeError: Cannot read property 'get' of undefined vue js

I'm having a hard time trying to understand vue.js. I'm currently trying to figure out how I can fetch or call the API. I've managed to setup my index.html app.js can also the packages that are include in the node_modules.

When I try to run my file I'm getting TypeError: Cannot read property 'get' of undefined on my console. It says that I need to install vue-resource and add the two lines of code below.

Where do I insert them exactly? Is it inside my app.js? Sorry for my ignorance but I'm still new to Javascript and Vue.js

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://unpkg.com/vue" ></script>

    <title>article-app</title>
  </head>

  <body>
    <div id="vue-app">
      {{ articles }}
    </div>

    <script src="app.js"></script>
    <script src="main.js" ></script>
  </body>
</html>

var article = new Vue({
    el: '#vue-app',

    data: {
        articles: ''
    },

    created: function () {
        this.fetchData();
    },        

    methods: {
        fetchData: function () {
            var that = this
            this.$http.get('http://localhost/aim-beta/rest/export/json/article'),
                function (data) {
                    this.articles = data.main.temp;
                }
        }
    }

});

1个回答

    最佳答案
  1. 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;
          })
        }
      }
    });