将上述代码复制到cli创建的项目的index.vue的中替换原有代码，运行到微信小程序，可以发现无法正常for循环渲染
u***@gmail.com
- 发布：2020-06-27 20:53
- 更新：2020-06-29 12:09
- 阅读：740
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
第三方开发者工具版本号： 2.0.0-27920200618002
基础库版本号： 2.0.0-27920200618002
项目创建方式： CLI
CLI版本号： 4.4.4
操作步骤：
预期结果：
页面上可以正常显示2-4-6-8-10五个数字
页面上可以正常显示2-4-6-8-10五个数字
实际结果：
空白页面
空白页面
bug描述：
复制代码<template>
<div id="app">
<div v-for="(set,index) in sets" :key="index">
<div v-for="(n,idx) in even(set)" :key="idx">{{ n }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
}
},
onLoad() {
},
methods: {
even(numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.logo {
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
代码如上，H5版本正常，但是小程序无法正常显示
u***@gmail.com (作者)
多重循环下的里层循环没法写到计算属性里面啊
2020-06-29 14:07
Sunny寶寶
回复 u***@gmail.com:
<div v-for="(set, index) in setsTemp" :key="index"><div v-for="(n, idx) in set" :key="idx">{{n}}</div>
</div>
computed: {setsTemp() {
return this.sets.map(set => {
return set.filter(number => {
return number % 2 === 0;
});
});
}
}
2020-06-29 14:40
u***@gmail.com (作者)
修改外层为computed也是一种方法，我目前是通过组件来绕过的。但是还是希望能再小程序里面支持for循环里面使用方法，比较直观
2020-06-29 18:51
u***@gmail.com (作者)
而且实际过程中可能数组比较复杂 不太好对外层循环修改
2020-06-29 18:51
u***@gmail.com (作者)
希望开发者能修改这个问题或者能在文档里面声明小程序不支持v-for中使用方法，并说明用计算属性或者组件解决
2020-06-29 19:03