【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>效果演示接下来为了更加接近生产环境
【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>
以下是执行结果(手动滑稽脸)
完
更多推荐
所有评论(0)