【UniApp】v-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>

以下是执行结果（手动滑稽脸）

_完