picker-view Vue 环境 在淘宝/支付宝小程序表现 异常

[yijinc]

相关平台

支付宝小程序

复现仓库

https://github.com/暂无线上链接
小程序基础库: 111
使用框架: Vue 3

复现步骤

使用对象数组遍历选项

<template>
  <picker-view :value="value" @change="onChange">
    <picker-view-column>
      <view v-for="(item, index) in options" :key="index">{{ item.label }}</view>
    </picker-view-column>
  </picker-view>
</template>

<script>
  export default {
    name: "Index",
    data() {
      return {
        options: [
          { label: '选项一', value: 1 },
          { label: '选项二', value: 2 },
          { label: '选项三', value: 3 },
          { label: '选项四', value: 4 },
          { label: '选项五', value: 5 },
          { label: '选项六', value: 6 },
        ],
        value: [1],
      }
    },
    methods: {
      onChange: function(e) {
        console.log('onChange', e.detail.value, this.options);
      }
    }
  }
</script>

期望结果

range 正常展示，value 正常回调

实际结果

1，循环option 上下多出了一个空行
2，change 事件回调函数偶尔会多一列value 值

环境信息

👽 Taro v3.3.16


  Taro CLI 3.3.16 environment info:
    System:
      OS: macOS 12.0.1
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
      Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
      npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm

[github-actions]

等待热心的小伙伴解决问题中..., 有一些相关的 issues 可能帮助到你!

• 支付宝小程序插件生成的plugin.json配置错误
• 自定义微信小程序底部导航栏不显示
• 原生项目使用taro，小程序包体积过大无法进行预览上传

Thank you so much!

[MaiYaoqiang]

同样的问题，楼主有找到解决方案了吗，这个也导致了nut-ui的picker在支付宝环境出bug