无法在 Vuejs3 中显示从 API 接收到的数据

Question

我是 Composition API 3 的新手，正在尝试调用 API 并在页面

中显示数据

我的代码是这样的：

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");
  }
}

它成功地从 API 获取数据，但 没有 显示在模板中：

<template>
  {{ items }}
</template>

问题出在哪里？

Answer 1

您正在用原始数据覆盖 items（一个 reactive 实例），这会消除其反应性：

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

选项 1：使用 reactive

中的对象

使用接收原始数据的reactive 对象:

                           
const items = reactive({ items: [] as IChannel[] });
async function get() {
  try {
    const res = await channelService.get()
            
    items.items = res.data;
  } catch (err) {
    //...
  }
}

demo 1

选项 2：使用 ref

使用 ref 而不是 reactive，确保使用新收到的原始数据设置其 value 属性：

               
const items = ref([] as IChannel[])
async function get() {
  try {
    const res = await channelService.get()
            
    items.value = res.data;
  } catch (err) {
    //...
  }
}

demo 2