使用 API nuxt 3 的结果填充输入数据

Question

我有一个从 API 获取数据的 nuxt 3 应用程序。我想使用该数据填充模板中的输入字段，但我不断收到错误消息。

这是我的代码的 sn-p

<script setup>

const config = useRuntimeConfig();

const route = useRoute();

const router = useRouter();

const { data: pkg } = useFetch(
  () => '/api/id/1/'
);

const request = ref({
  field: pkg.value.field_value,
});

当我 console.log(pkg.value.field_value) 时，我在浏览器开发人员工具控制台选项卡上打印了值，但在硬刷新时，我收到错误 Cannot read properties of null (reading 'field_value')

我需要动态设置字段值的原因是为了能够更新它。

以前有人遇到过这个问题，你是如何解决的

Answer 1

将 await 添加到 useFetch 函数，因为在第一次渲染时 pkg 不可用：

<script setup>

const config = useRuntimeConfig();

const route = useRoute();

const router = useRouter();

const { data: pkg } = await useFetch(
  () => '/api/id/1/'
);

const request = ref({
  field: pkg.value.field_value,
});