Sometimes, we want to access external JSON file objects in Vue.js app.
In this article, we’ll look at how to access external JSON file objects in Vue.js app.
How to access external JSON file objects in Vue.js app?
To access external JSON file objects in Vue.js app, we can import the JSON with import and then use that as the value of a reactive property.
For instance, we write
<template>
<div>
<div v-for="data in myJson">{{ data }}</div>
</div>
</template>
<script>
import json from "./json/data.json";
export default {
data() {
return {
myJson: json,
};
},
};
</script>
to import the json array from the ./json/data.json file.
And then we set json as the value of the myJson reactive property.
Next, in the template, we loop through the myJson object and show the data of each entry.
Conclusion
To access external JSON file objects in Vue.js app, we can import the JSON with import and then use that as the value of a reactive property.
