Vue 3分页组件无法在页面可视化渲染问题求助

1. Props类型定义错误 #

Laravel分页返回的links是数组，但组件props将其定义为Object，导致v-for无法遍历，组件无内容渲染。

修复：修改props类型为数组：

<script>
export default {
  props: {
    links: Array // 改为Array类型
  }
};
</script>

2. 错误使用动态组件Component #

Vue没有内置Link组件，动态绑定Link会导致组件无法识别，渲染失败。若需普通跳转用<a>标签，Vue路由跳转则用<router-link>。

修复：用条件渲染区分<a>和<span>：

<template>
  <div>
    <template v-for="link in links" :key="link.url || link.label">
      <a 
        v-if="link.url"
        :href="link.url"
        v-html="link.label"
        class="px-1"
        :class="{ 'font-bold': link.active }"
      />
      <span
        v-else
        v-html="link.label"
        class="px-1 text-gray-500"
      />
    </template>
  </div>
</template>

3. 无效的:html属性 #

Vue中渲染HTML内容需使用v-html指令，:html属性无法解析HTML，导致分页标签（如«）无法正常显示。

修复：将:html="link.label"替换为v-html="link.label"，如上代码所示。

4. 数据传递路径错误 #

Laravel分页返回的links与data是同级根属性，但你传入的是products.data.links，导致组件接收的links为undefined。

修复：修改组件调用路径：

<Pagination :links="products.links" class="mt-6" />

完整修复后的Pagination.vue代码 #

<script>
export default {
  props: {
    links: {
      type: Array,
      required: true
    }
  }
};
</script>

<template>
  <div>
    <template v-for="link in links" :key="link.url || link.label">
      <a 
        v-if="link.url"
        :href="link.url"
        v-html="link.label"
        class="px-1"
        :class="{ 'font-bold': link.active }"
      />
      <span
        v-else
        v-html="link.label"
        class="px-1 text-gray-500"
      />
    </template>
  </div>
</template>

内容的提问来源于stack exchange，提问作者Dynamdilshan