从异步数据设置useSeoMeta

Question

我有从我的 Sanity CMS 获取的代码。我正在设置

useSeoMeta

，以便标题是来自 Sanity 数据的标题。

const { data } = useAsyncData('category', () => sanity.fetch(
  query, { categoryId: route.params.id }
));

useSeoMeta({
      data,
      description: () => `${data.value[0].description}`,
      title: () => `${data.value[0].title} Card Prices & List`,
});

我遇到的问题是，第一次单击时页面未加载，然后第二次单击页面加载并加载了标题/描述。第一次单击时，我在数据上得到通常的

TypeError: Cannot read properties of null (reading '0')

，因为它尚未加载还没有。

Answer 1

您可以尝试在加载时使用占位符

const { data } = useAsyncData('category', () => sanity.fetch(
  query, { categoryId: route.params.id }
));

useSeoMeta({
      data,
      description: () => `${data.value?.[0].description ?? 'Loading...' }`,
      title: () => `${data.value?.[0].title ?? 'Loading' } Card Prices & List`,
});