CODEWITHSUNDEEP
javascriptvue.js
Noel
Noel

Reputation: 67

Trying to access an API using Vue js

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;
                }
        }
    }

});

Upvotes: 0

Views: 782

Answers (4)

beingadityak
beingadityak

Reputation: 109

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

Upvotes: 0

Vipin Kumar
Vipin Kumar

Reputation: 6546

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

Upvotes: 1

AimeTPGM
AimeTPGM

Reputation: 241

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()
            }

Upvotes: 0

Bernie Chiu
Bernie Chiu

Reputation: 263

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

data: {
    articles = ''
}

Upvotes: 0

Related Questions