老师关于vue请教一个问题

来源:9-2 Dropdown 编码第一部分

星光荡开宇宙

2024-04-01

在路由:http://localhost:5173/manage/list 页面下点击跳转到其他页面会报错一个这样的错误
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

<!-- List.vue -->
<template>
  <div class="header">
    <div class="left">
      <h3>我的问卷</h3>
    </div>
    <div class="right">搜索</div>
  </div>
  <div class="content">
    <template v-if="questionList.length > 0">
      <template v-for="item in questionList" :key="item._id">
        <QuestionCard :data="item" />
      </template>
    </template>
  </div>
  <div class="footer">loadMore... 上滑加载更多...</div>
</template>

<script setup lang="ts">
import QuestionCard from '@/components/QuestionCard.vue'
import { ref } from 'vue'
import { useTitle } from '@vueuse/core'
const rawQuestionList = [
  {
    _id: 'q1',
    title: '问卷1',
    isPublished: false,
    isStar: false,
    answerCount: 5,
    createdAt: '3月10日 13:23'
  },
  {
    _id: 'q2',
    title: '问卷2',
    isPublished: true,
    isStar: true,
    answerCount: 5,
    createdAt: '3月11日 13:23'
  },
  {
    _id: 'q3',
    title: '问卷3',
    isPublished: false,
    isStar: true,
    answerCount: 6,
    createdAt: '3月12日 13:23'
  }
]

const questionList = ref(rawQuestionList)
useTitle('小星问卷 - 我的问卷')
</script>

<style scoped lang="scss">
@import url(./common.scss);
</style>

而我把v-for循环删除了这个页面的跳转又恢复了,这是什么问题?

我在vue-router库的Issues找到了这个一样的报错问题 https://github.com/vuejs/router/issues/1874
没搞懂技术人员解释的是什么意思。

希望老师帮忙解惑,谢谢了

写回答

2回答

我自己种花海

2024-04-09

看了你的代码,你在使用elemntui组件的button上面的icon属性 ,你使用h函数处理antD的icon,这个地方报错了,且你这样写并不生效,导致页面渲染有问题。QuestionCard.vue中

        <el-button

          :icon="h(EditOutlined)"

          size="small"

          @click="() => router.push(`/question/edit/${props.data._id}`)"

        >

          编辑问卷

        </el-button>

      :icon="h(EditOutlined)" 使用element 自带的icon

0
1
星光荡开宇宙
非常感谢!
2024-04-29
共1条回复

张轩

2024-04-02

同学你好

由于不是本课程的问题,我还能再业余时间帮你看一下哈,我今天晚上有空帮你看看有没有什么思路,谢谢

0
1
星光荡开宇宙
好的,谢谢
2024-04-02
共1条回复

进阶必学,打造媲美ElementPlus的组件库

Vue3.3 + TS4 ,自主打造媲美 ElementPlus 的组件库

481 学习 · 219 问题

查看课程