Can't show recieved data from API in Vuejs3-CodePudding

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?

CodePudding user response：

You're overwriting items (a reactive instance) with the raw data, which removes its reactivity:

let items: IChannel[] = reactive([]);
⋮
items = res.data; ❌ overwrites `reactive`

Option 1: Use object in `reactive`

Use a reactive object that receives the raw data:

Option 1: Use object in reactive

Option 1: Use object in `reactive`