Nuxt 带把带api 请求的组件放入el-row 报错

Question

Index页面

<template>

    <!-- Test 放在 el-row 里面报错 -->
    <el-row>
        <Test>

        </Test>
    </el-row>

    <!-- Test 不放在 el-row 里面不报错 -->
    <!-- <div>
        <Test>

        </Test>
    </div> -->

</template>
<script setup lang="ts">
import SideBar from '~/pages/SideBar/index1.vue'
import Test from '~/pages/SideBar/test.vue'


</script>

Test 页面

<template>

    <ul>
        <li v-for="item in tagList.data" :key="item.id">{{ item.tagName }}</li>
    </ul>
</template>

<script setup>

import { getTagCloud } from "~/composables/api/tag";

const { data: tagList } = await useFetch('http://127.0.0.1:666/Tag/GetTagCloud')


</script>

Answer 1

让【宝码香车】来帮你解答，本回答参考DeepSeek编写，并整理提供。
如果还有疑问可以点击头像关注私信或评论。如果答案让您满意，请采纳、点赞、关注，非常感谢！

# Nuxt 组件在 el-row 中报错解决方案

根据您提供的信息，问题出现在将带有 API 请求的 Test 组件放入 el-row 时出现错误。这可能是由于 Element Plus 的 el-row 组件与 Nuxt 的异步数据获取机制之间的兼容性问题。

解决方案

1. 确保正确导入 Element Plus

首先确认您已正确安装和配置 Element Plus：

# 安装 Element Plus
npm install element-plus

然后在 nuxt.config.ts 中配置：

export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
  elementPlus: {
    // 配置选项
  }
})

2. 修改 Test 组件的数据获取方式

将 Test 组件中的直接 await 改为使用 useAsyncData：

<script setup>
import { getTagCloud } from "~/composables/api/tag";

const { data: tagList } = await useAsyncData('tagCloud', () => 
  $fetch('http://127.0.0.1:666/Tag/GetTagCloud')
)
</script>

3. 使用 v-if 确保数据加载完成

在父组件中，确保数据加载完成后再渲染：

<template>
  <el-row v-if="tagList">
    <Test />
  </el-row>
</template>

4. 检查 el-row 的嵌套规则

Element Plus 的 el-row 需要与 el-col 配合使用，确保正确嵌套：

<el-row>
  <el-col :span="24">
    <Test />
  </el-col>
</el-row>

完整解决方案示例

Test 组件修改：

<template>
  <ul v-if="tagList">
    <li v-for="item in tagList.data" :key="item.id">{{ item.tagName }}</li>
  </ul>
</template>

<script setup>
const { data: tagList } = await useAsyncData('tagCloud', () => 
  $fetch('http://127.0.0.1:666/Tag/GetTagCloud')
)
</script>

Index 页面修改：

<template>
  <el-row>
    <el-col :span="24">
      <Test />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import Test from '~/pages/SideBar/test.vue'
</script>

如果问题仍然存在，请检查控制台错误信息，可能是 Element Plus 版本兼容性或 CSS 加载问题导致的。