Blog

Posted on

Vue.http.get

You can create an object and pass it to the vue instance like that :

var link = 'https://jsonplaceholder.typicode.com/users';
var data = { 
    list: null 
};

Vue.http.get(link).then(function(response){
    data.list = response.data;
}, function(error){
    console.log(error.statusText);
});

new Vue ({
    el: '#app',
    data: data 
});

Or you can create a function under the methods object and then call it in the mounted function :

var link = 'https://jsonplaceholder.typicode.com/users';
new Vue ({
    el: '#app',
    data: {
        list: null
    },
    methods:{
        getUsers: function(){
            this.$http.get(link).then(function(response){
                this.list = response.data;
            }, function(error){
                console.log(error.statusText);
            });
        }
    },
    mounted: function () {
        this.getUsers();
    }
});
Posted on

Vue Fetch(url)

In your previous Vue component. Add the following code in the mounted() life cycle event to send an Ajax request when the component is mounted.
fetch(“http://jsonplaceholder.typicode.com/todos”).then(function (response) {
return response.json();
}).then(function (result) {
this.todos = result;
});

fetch(‘https://jsonplaceholder.typicode.com/todos’, { method: ‘POST’, body:JSON.stringify({title:“a new todo”}) }).then((res) => res.json()) .then((data) => console.log(data)) .catch((err)=>console.error(err))

 

Posted on

Arrow Functions {}

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id=”demo”></p>

<script>
const x = (x, y) => { return x * y };
document.getElementById(“demo”).innerHTML = x(5, 5);
</script>

</body>
</html>

Posted on

Vue API

var weather = new Vue({
        el: '#weather',

        data: {
            getTemp: []
        },

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

        methods: {
            fetchData: function () {
                this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID')
                          .then(response => {
                             this.getTemp = response.data
                             // or like this this.getTemp = response.json()
                          })
            }
        }

    })
    ;


https://stackoverflow.com/questions/41234463/how-to-access-an-api-with-vue-js
bootTestDownload
VueAPI1Download