Trying to access an API using Vue js

Question

I'm having some trouble trying to access an API to get or fetch data. I'm still currently new to vue.js and javascript. I'm getting an error Uncaught SyntaxError: Invalid shorthand property initializer. I can't seem to understand what the error means or seems to indicate.

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

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

    data: {
        articles = ''
    },

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

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

});

Vipin Kumar · Accepted Answer · 2017-11-24 03:35:17Z

1

Instead of using this.$http, use axios library for making api calls.

answered Nov 24, 2017 at 3:35

Vipin Kumar

6,5661 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noel Over a year ago

I've just installed axios on dev my folder. Where do I usually place this three lines import Vue from 'vue';, import axios from 'axios';, import VueAxios from 'vue-axios';? Do include them inside my app.js?

Vipin Kumar Over a year ago

can you create a plunker or fiddler for this. it would be easy to fix there.

Bernie Chiu · Accepted Answer · 2017-11-24 03:14:27Z

0

I think you can't use equal in the JS object syntax

data: {
    articles = ''
}

answered Nov 24, 2017 at 3:14

Bernie Chiu

2632 silver badges12 bronze badges

1 Comment

Noel Over a year ago

Right, I didn't notice that. Now I'm currently getting an error Cannot read property 'get' of undefined

AimeTPGM · Accepted Answer · 2017-11-24 03:30:34Z

0

Try

data: function() { 
    return () {
        articles: ‘’
    }
}

And specify http:// to the localhost

this.$http.get('http://localhost/aim-beta/rest/export/json/article'),
            function (data) {
                this.articles = data.json()
            }

answered Nov 24, 2017 at 3:30

AimeTPGM

2411 silver badge12 bronze badges

1 Comment

Noel Over a year ago

Hi, I'm getting an error "TypeError: Cannot read property 'get' of undefined"

heyadityak · Accepted Answer · 2017-11-24 03:44:55Z

0

Use this for the data JSON object:

data: {
     articles: ''
}

Then, use Promise for firing the HTTP request (note that I used the http:// with the URL):

this.$http.get('http://localhost/aim-beta/rest/export/json/article')
          .then(function(response){
                this.articles = response.json();
          });

Source : Documentation

answered Nov 24, 2017 at 3:44

heyadityak

1093 silver badges13 bronze badges

6 Comments

Noel Over a year ago

Hi, I'm getting an error TypeError: Cannot read property 'get' of undefined

heyadityak Over a year ago

try using Vue.http.get instead of this.$http.get. Then, let me know.

Noel Over a year ago

Hi, Same error on the console TypeError: Cannot read property 'get' of undefined

heyadityak Over a year ago

Use this: before creating your Vue app, add this line before -> Vue.use(VueResource) Make sure you import the vue-resource : import VueResource from 'vue-resource'

heyadityak Over a year ago

Are you using any bundlers like webpack or browserify? Then, the above comment should work (Source : Config Docs)

|

Collectives™ on Stack Overflow

Trying to access an API using Vue js

4 Answers 4

2 Comments

1 Comment

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related