Javascript / vue.js receive json

Here is a little example of how to load external JSON data into your component:

a.json:

{"hello": "welcome"}

index.html:

<div id="app">    <pre>{{ json.hello }}</pre></div><script type="text/javascript">var app = new Vue({    el: '#app',    data: {        json: null    }});$.getJSON('http://localhost/a.json', function (json) {    app.json = json;});</script>

--- Edited ---

Or with created event:

<script type="text/javascript">new Vue({    el: '#app',    data: {        json: null    },    created: function () {        var _this = this;        $.getJSON('http://localhost/a.json', function (json) {            _this.json = json;        });    }});</script>

Building on @vbarbarosh's answer, but using the browser's fetch api:

a.json:

{"hello": "welcome"}

index.html:

<div id="app">    <pre>{{ json.hello }}</pre></div><script type="text/javascript">new Vue({    el: '#app',    data: {        json: null    },    created: function () {      fetch("/a.json")        .then(r => r.json())        .then(json => {          this.json=json;        });    }});</script>

You have to bind this to the outer function, too.

getJson: function () { ...}.bind(this)