Read json file vuejs
|
Aug 5, 2020by Sai gowtham
How to read the local JSON file in Vuevuejs1min read In this tutorial, we are going to learn about how to read and display the local JSON file in a Vue app. Consider, we have this following users.json file in our vue.js app. users.json [
{
"id": 23,
"name": "Opera"
},
{
"id": 24,
"name": "Kevin"
},
{
"id": 25,
"name": "Lora"
}
] Reading the JSON fileWe can read a (local) JSON file by importing it into the vue component and rendering the data into the dom by looping through it. App.vue <template>
<div id="app">
<ul>
<li v-for="user in users" :key="user.id"> {{user.name}} li> ul>
div>
template>
<script>
import usersData from "./users.json";
export default {
data() {
return {
users: usersData, };
},
};
script> In the above code, we first imported the users.json file as usersData then assigned it to the users data property. At final, we loop through the users (json) data using v-for direcive and rendered it into the dom.
|
