【报Bug】v-for中数据源数组是menthod的时候，无法转化为微信小程序的代码。使用v-for的代码不见了

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

第三方开发者工具版本号： 2.0.0-27920200618002

基础库版本号： 2.0.0-27920200618002

项目创建方式： CLI

CLI版本号： 4.4.4

操作步骤：

将上述代码复制到cli创建的项目的index.vue的中替换原有代码，运行到微信小程序，可以发现无法正常for循环渲染

预期结果：

页面上可以正常显示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版本正常，但是小程序无法正常显示

2020-06-27 20:53 负责人:无分享

1 个回复

Sunny寶寶 - 90後

你把 even 写到 computed 里吧。

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

该问题目前已经被锁定, 无法添加新回复

【报Bug】v-for中数据源数组是menthod的时候，无法转化为微信小程序的代码。使用v-for的代码不见了

操作步骤：

将上述代码复制到cli创建的项目的index.vue的中替换原有代码，运行到微信小程序，可以发现无法正常for循环渲染

预期结果：

页面上可以正常显示2-4-6-8-10五个数字

实际结果：

空白页面

bug描述：

1 个回复

公告

相关问题

【报Bug】v-for中数据源数组是menthod的时候，无法转化为微信小程序的代码。使用v-for的代码不见了

操作步骤： 将上述代码复制到cli创建的项目的index.vue的中替换原有代码，运行到微信小程序，可以发现无法正常for循环渲染

预期结果： 页面上可以正常显示2-4-6-8-10五个数字

实际结果： 空白页面

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

将上述代码复制到cli创建的项目的index.vue的中替换原有代码，运行到微信小程序，可以发现无法正常for循环渲染

预期结果：

页面上可以正常显示2-4-6-8-10五个数字

实际结果：

空白页面