Vue3相应数据为什么无法渲染

Question

<template>
  首页
  <button @click="Books()">书籍信息</button>
  <hr />
    <table>
        <th>
          <td>序号</td>
           <td>书名</td>
            <td>作者</td>
            <td>出版社</td>
        </th>
            <template v-if="books">
                  <tr v-for="book in books.data" :key="book.id">
          <td>{{book.id}}</td>
          <td>{{book.bookname}}</td>
             <td>{{book.author}}</td>
                     <td>{{book.publisher}}</td>
        </tr>
            </template>
    </table>
</template >
  <script setup>
import { reactive } from "@vue/reactivity";
import { getBooks } from "../request/api.js";
async function Books() {
  let result = await getBooks();
  let books = reactive(result);
  console.log("books:", books);
}
</script>

页面加载的时候控制台显示：

vue warn: Property "books" was accessed during render but is not defined on instance.

点击按钮 控制台显示数据是拿到的：

books: Proxy {status: 200, msg: '获取图书列表成功', data: Array(4)}

但是页面没有渲染异步数据。

Answer 1

你的books是在函数内的，外部没有，怎么能拿到并获取呢

Answer 2

错误提示不是很明显了么……books 没定义……

你想用 script setup 好歹定义成这个 script 里的顶层变量啊，你现在那个 books 就是一个块级作用域的局部变量，外面当然拿不到值了。