Cómo leer el archivo JSON local en Vue

En este tutorial, aprenderemos a leer y mostrar el archivo JSON local en una aplicación Vue.

Considere, tenemos esto siguiente users.json archivo en nuestra aplicación vue.js.

usuarios.json

[
  {
    "id": 23,
    "name": "Opera"
  },
  {
    "id": 24,
    "name": "Kevin"
  },
  {
    "id": 25,
    "name": "Lora"
  }
]

Leyendo el archivo JSON

Podemos leer un archivo JSON (local) importándolo al componente vue y renderizar los datos en el dom recorriéndolo.

Vista de la aplicación

<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>

En el código anterior, primero importamos el users.json archivo como usersData luego lo asignó a users propiedad de los datos.

Al final, pasamos por el users (json) usando la directiva v-for y los representó en el archivo dom.

Si quieres conocer otros artículos parecidos a Cómo leer el archivo JSON local en Vue puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas