Soy nuevo con la API de composición 3 e intento llamar a una API y mostrar datos en la página
Mi código es así:
let items: IChannel[] = reactive([]); async function get() { try { const res = await channelService.get() console.log(res) items = res.data; } catch (err) { console.log(err) Swal.fire("error", "error", "error"); } }y obtiene datos de la API con éxito pero no se muestra en la plantilla:
<template> {{ items }} </template>¿Dónde está el problema?
Está sobrescribiendo items (una instancia reactive ) con los datos sin procesar, lo que elimina su reactividad:
let items: IChannel[] = reactive([]); ⋮ items = res.data; ❌ overwrites `reactive`reactive Use un objeto reactive que reciba los datos sin procesar:
👇 const items = reactive({ items: [] as IChannel[] }); async function get() { try { const res = await channelService.get() 👇 items.items = res.data; } catch (err) { //... } }ref Use un ref en lugar de reactive , asegurándose de establecer su propiedad de value con los datos sin procesar recién recibidos:
👇 const items = ref([] as IChannel[]) async function get() { try { const res = await channelService.get() 👇 items.value = res.data; } catch (err) { //... } }