how to get data from JSON file in Vue.js?

Well, you will have to add the code that you have written for Vue

If you are in a vue app, you can do something like this

<script>      import json from './json/data.json'      export default{          data(){              return{                  myJson: json              }          }      }</script>

and if you are writting it inside an html page. you can do it in 2 steps.

1st is to add the file link as a script

<script src="../file.json"></script>

then in the vue script section you can assign it to the data object.

var ele = new Vue({     el : "#YourElement",     data : ObjName});

"ObjName" is a name of the json object in the file.

ObjName :{"data": [    [        {           "account_id": "  "           "account_name": "   "        }

You can use a computed property that would reactively take account_name property of the first object of every array:

const data = {  "data": [    [      {        "account_id": "11",        "account_name": "name11"      },      {        "account_id": "12",        "account_name": "name12"      },      {        "account_id": "13",        "account_name": "name13"      },      {        "account_id": "14",        "account_name": "name14"      }    ],    [      {        "account_id": "21",        "account_name": "name21"      },      {        "account_id": "22",        "account_name": "name22"      },      {        "account_id": "23",        "account_name": "name23"      }    ],    [      {        "account_id": "31",        "account_name": "name31"      },      {        "account_id": "32",        "account_name": "name32"      },      {        "account_id": "33",        "account_name": "name33"      }    ]  ]}new Vue({  el: '#demo',  data() {    return {      data: data.data    }  },  computed: {    firstAccountNames() {      return this.data.map(dataSet => dataSet[0].account_name)    }  }})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="demo">  <ul>    <li v-for="name in firstAccountNames">      {{ name }}    </li>  </ul></div>

I solved it! here is code!

var app = new Vue({el: '#app',data: {    datas: []},computed: {    getAccountNames() {        return this.datas.map(dataSet => dataSet[0].account_name)    }},mounted() {    var self = this    $.getJSON("modified_data.json", function(json_data) {        self.datas = json_data.data    })  }})

Anyway, another question...what is the difference between "this" and "self" ?"self" is equal to "this" I think but when I just use "this", it has error but "self" works well...anyone can tell me the difference?