How to acces external json file objects in vue.js app
Just assign the import to a data property
<script>
import json from './json/data.json'
export default{
data(){
return{
myJson: json
}
}
}
</script>
then loop through the myJson
property in your template using v-for
<template>
<div>
<div v-for="data in myJson">{{data}}</div>
</div>
</template>
NOTE
If the object you want to import is static i.e does not change then assigning it to a data property would make no sense as it does not need to be reactive.
Vue converts all the properties in the data
option to getters/setters for the properties to be reactive. So it would be unnecessary and overhead for vue to setup getters/setters for data which is not going to change. See Reactivity in depth.
So you can create a custom option as follows:
<script>
import MY_JSON from './json/data.json'
export default{
//custom option named myJson
myJson: MY_JSON
}
</script>
then loop through the custom option in your template using $options
:
<template>
<div>
<div v-for="data in $options.myJson">{{data}}</div>
</div>
</template>
If your file looks like this:
[
{
"firstname": "toto",
"lastname": "titi"
},
{
"firstname": "toto2",
"lastname": "titi2"
},
]
You can do:
import json from './json/data.json';
// ....
json.forEach(x => { console.log(x.firstname, x.lastname); });
Typescript projects (I have typescript in SFC vue components), need to set resolveJsonModule
compiler option to true
.
In tsconfig.json:
{
"compilerOptions": {
...
"resolveJsonModule": true,
...
},
...
}
Happy coding :)
(Source https://www.typescriptlang.org/docs/handbook/compiler-options.html)