Javascript v-for-throw呈现的AsyncData/fetch中的数组列表：客户端呈现的虚拟DOM树与服务器呈现的不匹配

我正在为我的应用程序使用Nuxt.js。在我的一个页面中，我使用

AsyncData

从Api异步获取数据对象数组，我使用

v-for

在模板中呈现该数组。当我不使用

nuxt链接

或

在
v-for
内部时，这项功能正常工作。一旦我在我的
v-for
中包含
numxt链接
或
，我就会得到以下错误：

The client-side rendered virtual DOM tree is not matching server-rendered content. 
This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. 
Bailing hydration and performing full client-side render.

模板应该只包含1个元素，这很好。但不应循环顶部的父元素。试着把它包在一个小盒子里

<div>
  <div
    class="place-card"
    :key="place._id"
    v-for="place in places"
  >
    <nuxt-link
      :to="{
        name: 'places-title',
        params: { title: place.title }
      }"
    >
      <PlaceCard :place="place" />
    </nuxt-link>
   </div>
</div>


我想出来了。根据和，我有一个嵌套链接，一个在我的
v-for
div中，另一个在我的
PlaceCard
组件中，这是不允许的。
在
中有什么？您可以从控制台发送扩展日志
与VNodes不匹配的子节点的照片吗？
PlaceCard
是一个自定义组件。我还刚刚在
中打印了一个文本，但它不起作用。我在原始问题中添加了图像。如果与我使用的实际代码有任何混淆，我也可以向您提供原始代码。在这个问题中，我试图尽可能地缩小代码以解决实际问题。在我的原始代码中，我确实在v-for div周围有一个包含元素。不幸的是，这不是问题所在。
<template>
  <div class="bg-white rounded overflow-hidden shadow-lg">
    <img :src="place.images[0]" :alt="place.title" class="w-full h-40" />
    <div class="px-6 pt-4">
      <div class="font-bold text-base">{{ place.title }}</div>
    </div>
    <div class="px-6 pb-4">
      <nuxt-link :to="'/'"
        >#{{ place.placeType.split(' ').join('') }}</nuxt-link
      >
      <nuxt-link :to="'/'">#{{ place.address.country }}</nuxt-link>
      <nuxt-link :to="'/'" v-if="place.vegan">#vegan</nuxt-link>
      <nuxt-link :to="'/'" v-else>#not-vegan</nuxt-link>
      <nuxt-link :to="'/'" v-if="place.vegetarian">#vegetarian</nuxt-link>
      <nuxt-link :to="'/'" v-else>#not-vegetarian</nuxt-link>
    </div>
    <div class="author flex items-center py-3 px-6">
      <div class="user-logo">
        <img
          class="w-8 h-8 object-cover rounded-full mr-2 shadow"
          :src="place.creator.photoURL"
          :alt="place.creator.displayName"
        />
      </div>
      <div class="block text-xs">
        Added by<a href="#" class="ml-1">{{
          place.creator.displayName.split(' ').join('')
        }}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    place: {
      type: Object,
      default: null
    }
  }
}
</script>

<div>
  <div
    class="place-card"
    :key="place._id"
    v-for="place in places"
  >
    <nuxt-link
      :to="{
        name: 'places-title',
        params: { title: place.title }
      }"
    >
      <PlaceCard :place="place" />
    </nuxt-link>
   </div>
</div>