小程序中 v-for 不支持遍历对象

[jamieYou]

问题描述
v-for 不支持遍历对象

复现步骤
[复现问题的步骤]

<template v-for="(item, key) in { list1, list2 }">
</template>

预期结果
遍历成功

实际结果
控制台报错误。
我看了编译出来的 js 代码，是这样子的
{ list1, list2 }.map(......)
对象没有 map 方法，自然就报错了。

系统信息:

• 发行平台: 微信小程序 - HBuilderX版本 [如使用HBuilderX，则需提供 HBuilderX 版本号]

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 10.0.0 - ~/.nvm/versions/node/v10.0.0/bin/node
    Yarn: 1.12.3 - ~/.nvm/versions/node/v10.0.0/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v10.0.0/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: Not Found
    Safari: 12.1.1
  npmPackages:
    @dcloudio/uni-app-plus: * => 0.0.241 
    @dcloudio/uni-app-plus-nvue:  0.0.1 
    @dcloudio/uni-app-plus-nvue-v8:  0.0.1 
    @dcloudio/uni-cli-shared: * => 0.2.959 
    @dcloudio/uni-h5: * => 0.5.8 
    @dcloudio/uni-mp-alipay: * => 0.0.814 
    @dcloudio/uni-mp-baidu: * => 0.0.841 
    @dcloudio/uni-mp-toutiao: * => 0.0.338 
    @dcloudio/uni-mp-weixin: * => 0.0.960 
    @dcloudio/uni-template-compiler: * => 0.9.176 
    @dcloudio/vue-cli-plugin-hbuilderx: latest => 0.9.521 
    @dcloudio/vue-cli-plugin-uni: latest => 0.9.474 
    @dcloudio/webpack-nvue-entry-loader:  0.0.1 
    @dcloudio/webpack-uni-mp-loader: * => 0.3.629 
    @dcloudio/webpack-uni-pages-loader: * => 0.2.843 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.8.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.8.0 
    @vue/cli-plugin-babel: 3.5.1 => 3.5.1 
    @vue/cli-service: ^3.8.0 => 3.8.0 
    @vue/cli-shared-utils:  3.8.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    mpvue-page-factory:  1.0.1 
    mpvue-template-compiler:  1.0.13 
    uni-h5-vue:  2.6.10 
    uni-mp-vue:  2.6.10 
    vue: ^2.6.10 => 2.6.10 
    vue-class-component:  7.1.0 
    vue-cli-plugin-style-resources-loader: ^0.1.3 => 0.1.3 
    vue-hot-reload-api:  2.3.3 
    vue-lazyload:  1.2.3 
    vue-loader:  15.7.0 
    vue-property-decorator: ^8.1.1 => 8.1.1 
    vue-router:  3.0.1 
    vue-style-loader:  3.1.2 (3.1.2)
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    weex-vue-loader: ^0.7.0 => 0.7.0 
  npmGlobalPackages:
    @vue/cli: 3.5.3

补充信息
v-for 的遍历最好是采用 lodash.map 方法，可兼容对象

[fxy060608]

建议不要在模板中使用{ list1, list2 }这样的表达式，在编译至小程序时，该写法，触发了复杂表达式的编译逻辑，导致生成了{list1,list2}.map 的代码，可以考虑 computed ，否则即使修复了此问题，对性能也是有损失的

[hbbaly]

我也遇到了这个问题，在微信中不行，在支付宝中就可以