UniAppv-for列表渲染不执行方法参考解决方案

Posted 老邋遢

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了UniAppv-for列表渲染不执行方法参考解决方案相关的知识,希望对你有一定的参考价值。

【UniApp】v-for列表渲染不执行方法参考解决方案

问题描述

熟悉Vue的小伙伴一定很熟悉v-for

而使用Vue语法做跨端开发的UniApp也对v-for提供了良好的支持

以下是一段简单的uniapp使用v-for演示

<view v-for="(item,index) of 100" :key="index">
    item
</view>

效果演示

接下来为了更加接近生产环境,我们在页面加载的时候生成一个列表并循环(实际开发一般是请求API接口)

附上index.vue完整代码

<template>
	<view class="my-content">
		<view>uniappv-for列表渲染不执行方法演示</view>
		<view v-for="(item,index) in list" :key="index">
			item
		</view>
	</view>
</template>

<script>
	export default 
		onLoad() 
			for(let i=0;i<100;i++)
				this.list.push(i)
			
		,
		data() 
			return 
				list: []
			
		
	
</script>

<style>
</style>

因为效果相同,我就不放图了

直到这里,都是很正常的操作,但是接下来我们希望对循环的list执行一些操作

仅上改动部分

<view v-for="(item,index) in list.slice(0,10)" :key="index">
    item
</view>

效果如下

结果是列表没有渲染(数组slice后应该循环前10项)

同时在控制台没有任何报错信息

UniApp不允许我们对被循环数组进行任何操作(至少现在是这样的,可能未来会修复),所以我们更不可能将一个函数的返回值作为迭代的对象了

(注意:以下的代码是不会有效果的)

<template>
	<view class="my-content">
		<view>uniappv-for列表渲染不执行方法演示</view>
		<view v-for="(item,index) in func()" :key="index">
			item
		</view>
	</view>
</template>

<script>
	export default 
		onLoad() 
			for(let i=0;i<100;i++)
				this.list.push(i)
			
		,
		data() 
			return 
				list: []
			
		,
		methods:
			//被循环的方法,返回值为一个数组
			func()
				return [1,2,3,4,5]
			
		
	
</script>

<style>
</style>

但是在使用Vue语法开发过程中,在一些较为复杂的业务需求里,我们往往需要对被循环的数组或对象进行二次处理,所以允许循环函数的返回值对于开发来说还是很有必要的

那么如何破局?

解决方法

首先声明,以下方法为什么好使,笔者也很是困惑,毕竟笔者没有供职DCloud,也不清楚在移植Vue语法过程中出了什么纰漏,所以仅供参考,是否使用取决于您对于自己项目的权衡

方法就是:在内部渲染的数据后面加一个过滤器(无任何逻辑)

即形如

<view v-for="(item,index) in func()" :key="index">
    item | 任意过滤器 
</view>

既然要加一个无任何逻辑的过滤器,我们可以定义一个doNothing过滤器如下

filters:
    doNothing(val)
    //什么都不干,把值原封不动返回
    return val
    

完整代码如下

<template>
	<view class="my-content">
		<view>uniappv-for列表渲染不执行方法演示</view>
		<view v-for="(item,index) in func()" :key="index">
			item | doNothing 
		</view>
	</view>
</template>

<script>
	export default 
		onLoad() 
			for(let i=0;i<100;i++)
				this.list.push(i)
			
		,
		data() 
			return 
				list: []
			
		,
		methods:
			//被循环的方法,返回值为一个数组
			func()
				return [1,2,3,4,5]
			
		,
		filters:
			doNothing(val)
				//什么都不干,把值原封不动返回
				return val
			
		
	
</script>

<style>
</style>

以下是执行结果(手动滑稽脸)

以上是关于UniAppv-for列表渲染不执行方法参考解决方案的主要内容,如果未能解决你的问题,请参考以下文章

怎样保证js在页面元素渲染完后再执行

解决axios通过for循环向同一个接口发送请求后渲染出现的问题

Flutter 2 渲染图像像素化

Flex:在列表项渲染器中缓存图像?

[React] setState更新成功不触发渲染,不常见的解决方法

[React] setState更新成功不触发渲染,不常见的解决方法