0
311
ViewsVueJS - API de composición - Cómo importar y leer correctamente un archivo JSON local
Tengo problemas para cargar un archivo JSON local para leer algunos datos. Parece que puedo importar los datos, ya que puedo cerrar la sesión en la consola. Si hago la consola console.log(rooms.value) por ejemplo, obtengo lo siguiente en el navegador Chrome:
Quiero iterar a través de los datos, sin embargo, si pruebo v-for="room in rooms" y room.id , por ejemplo, solo obtengo 
Por favor, ¿alguien puede ayudar?
JSON:
{ "rooms":[ { "id": 1, "name": "Master Bedroom", "floor": 1, "lights": true, "blinds": true, "climate": true, "music": true }, { "id": 2, "name": "Living Room", "floor": 0, "lights": true, "blinds": true, "climate": true, "music": true } ] }Vista:
<script> import { ref } from 'vue' import roomData from '../../data/db.json' export default { components: {}, setup(){ const rooms = ref(roomData) console.log(rooms.value) return { rooms } } } </script>3 answers
Answer question0
puede llamar al resultado de la iteración con room.id no rooms.id , esto podría ser solo un error tipográfico en su código de template .
0
Lo he resuelto: solo podía acceder a la matriz asignando la constante a roomData.rooms (en lugar de solo roomData ). Entonces el código de trabajo se ve así:
<script> import { ref } from 'vue' import roomData from '../../data/db.json' export default { components: {}, setup(){ const rooms = ref(roomData.rooms) console.log(rooms.value) return { rooms } } } </script>0
para importar tu json puedes hacerlo con SFC en vuejs3
<script setup> import roomData from '../../data/db.json' console.log(roomData) </script>