Nuxt 3 水合儿童不匹配

Question

我使用

async await

从服务器获取了一个简单的类别列表，一切正常。接下来，我需要输出一个简单的

v-for

列表，然后我收到此警告。我可以删除

ul

标签的所有内容，但错误仍然存在，删除

v-for

错误就会消失。标签是原生的，我使用

useFetch

向服务器发出请求。数据来了，我看到了，一切都显示正确。

我能做什么？

<template>
<ul class="filter-item-list">
                <li v-for="item in categories" :key="item.id" >
                    <label class="radio" @click.stop="typeProduct=item.attributes.Title" >
                        <input type="radio" name="typeProduct" :checked="item.attributes.DefaultCategory">
                        <span class="icon"></span>
                        <span class="text">{{ item.attributes.Title }}</span>
                    </label>
                </li>
            </ul>
</template>

<script setup lang="ts">
const {categories, getCategories} = useCatalog()

await getCategories()
</script>

//pinia side

 actions: {
        async getCategories() {
            interface responseType {
                data: categoryType[],
                meta: []
            }

            useMain().$state.isLoading = true;
            const {data, error} = await useFetch(`${useRuntimeConfig().public.strapi.url}/api/categories`,
                {
                    method: "GET",
                    headers: {
                        "Content-Type": "application/json",
                    },
                })
            if (error.value) {
              
            } else {

              this.categories = (data.value as responseType).data
            }
            useMain().$state.isLoading = false;
        }}

Answer 1

我也遇到了同样的问题，这个应该怎么修复呢，才能用包裹警告的组件，还有其他办法吗