uniapp开发微信小程序-解决"v-for暂不支持循环数据"报错

270

一、问题描述

报出【v-for 暂不支持循环数据】这个错误,打印点击事件得到undefined

<view class="term" v-for="item in tabFlag == 0 ? list : tabFlag == 1 ? haveList : completeList" :key="item.id">
       <view @click="jump(item.id)">内容</view>
</view>

二、解决方案

第一种

  • 将原事件
 @click="jump(item.id)"
  • 尝试修改为:
@click="()=>jump(item.id)"

第二种

  • 使用计算属性优化
computed:{
		tabulation() {
                    return this.tabFlag == 0 ? this.list : this.tabFlag == 1 ? this.haveList : this.completeList
		}
	}
  • 循环如下
<view class="term" v-for="item in tabulation" :key="item.id">
       <view @click="jump(item.id)">内容</view>
</view>

三、 原因分析

  • 首先检查循环的key值是否存在并且唯一;
  • v-for这种写法在vue中是不推荐的,推荐使用计算属性优化;
  • 循环中的点击事件需要使用闭包 @click="()=>jump(item.id)"