使用vue3+vantUi3.x版本,van-list列表组件,控制台报错

van-list报错过程

vue3.0+vantUi3.x版本中,使用List列表组件时,代码就是官方给的demo

<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" >
  ...内容...
  </van-cell>
</van-list>

但是控制台会报警告⚠,循环报警告,导致页面崩溃。报错信息如下:
在这里插入图片描述
打印的报错警告部分如下:
instrument.js?ea14:109 [Vue warn]: Property undefined was accessed during render but is not defined on instance.

instrument.js?ea14:109 [Vue warn]: Property “toString” was accessed during render but is not defined on instance.

instrument.js?ea14:109 [Vue warn]: Property “valueOf” was accessed during render but is not defined on instance.

原因

经控制变量法,得出,只要加 <van-cell v-for="item in list" :key="item" :title="item" />控制台就会报循环警告。
具体什么原因导致的,暂不清楚。

解决办法

不使用 <van-cell v-for="item in list" :key="item" :title="item" />,代码写成

<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
	<div v-for="item in list" :key="item" >
  	...内容...
 	</div>
</van-list>

删除了van-cell ,也是可以用list的上拉加载更多的。

猜你喜欢

转载自blog.csdn.net/weixin_39550080/article/details/129146940
今日推荐