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列表渲染不执行方法参考解决方案的主要内容,如果未能解决你的问题,请参考以下文章
解决axios通过for循环向同一个接口发送请求后渲染出现的问题