I am new with Composition API 3 and trying to call an API and show data in page
My code is like this:
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");
}
}
and it successfully gets data from API but doesn't show in template:
<template>
{{ items }}
</template>
Where is the problem?
You're overwriting items (a reactive instance) with the raw data, which removes its reactivity:
let items: IChannel[] = reactive([]);
⋮
items = res.data; ❌ overwrites `reactive`
reactiveUse a reactive object that receives the raw data:
👇
const items = reactive({ items: [] as IChannel[] });
async function get() {
try {
const res = await channelService.get()
👇
items.items = res.data;
} catch (err) {
//...
}
}
refUse a ref instead of reactive, making sure to set its value property with the newly received raw data:
👇
const items = ref([] as IChannel[])
async function get() {
try {
const res = await channelService.get()
👇
items.value = res.data;
} catch (err) {
//...
}
}