uni-app 使用 vant checkbox报错 CreateListFromArrayLike called on non-object

在使用 uni-app 开发小程序的过程中使用到了有赞的小程序UI库。

在使用 van-checkbox 时, 监听多选按钮 change 事件时, 遇到如下报错:

uni-app 使用 vant checkbox报错 CreateListFromArrayLike called on non-object_第1张图片

使用代码如下:

<van-checkbox
  @change="inputHandle"
  class="check"
  icon-size="36rpx"
  :value="selectAll"
  checked-color="#A7BE2E"
>
  <text class="label">多选按钮</text>
</van-checkbox>

当时就很奇怪了,这究竟是什么原因呢? CreateListFromArrayLike called on non-object 在非对象上调用 CreateListFromArrayLike。一头雾水。

排查的过程, 首先去查阅了文档示例, 小程序中用 bind:change 监听子组件的自定义事件,在 uni-app 中使用 @change 监听是没有问题的。

其次去 vant github 上看看有没有别人遇到这样的问题, 很扫兴,发现没有类似的问题,难道只有我碰到了?

如果只有我遇到的话,那难道和我的开发环境有关? 去谷歌搜索了报错关键词http://127.0.0.1:30012/appservice/common/vendor.js:1324:32
看到有一个人遇到类似这样的问题,但是和 uni-appvant 组件库无关,说的是小程序的 基础库调至 xxx 以上。我以为我遇到了救星,赶紧把自己的基础库调整到 2.9.2,结果很不尽人意,仍然没有解决我的问题。

然而,有一个想法从脑海中浮现,难道是 vantcheckbox 组件写的不兼容, 内部错误? 吓得我赶快去看了一下 vant-checkbox 组件,确保自定义事件 change 在内部被调用了。

uni-app 使用 vant checkbox报错 CreateListFromArrayLike called on non-object_第2张图片

通过 debugger 调试了一边,发现 change 事件确实被调用了。

此刻发现我是真的菜!!! 菜归菜,但是我不能放弃。
看看还有没有别的招。

最后我的希望就是 uni-app 了,难道他们的核心包升级了? 和某些组件不兼容? 我马不停蹄的就来到了 uni-app 社区。心里希望一打开社区,就能发现别人反馈类似的问题,顺利看别人的解决方法。但是,大跌眼镜的我灰溜溜的退出的社区。一个能打的都没有!!

最后的最后, 我该怎么办?

我发现我得冷静下来好好想一想。

试了一下 @change.native="inputHandle" 发现好使了, 而且参数可以正常收到。太坑了。

想不太明白为什么要在 van-checkbox 的事件后加上 .native 修饰符。在 Vue中 .native 修饰符是想要在一个组件的根元素上监听一个原生事件, 这时, 你可以使用 v-on.native 修饰符。

不理解为什么使用的时候要 @click.native。明白的大佬麻烦解惑一下!!

你可能感兴趣的:(uni-app,踩坑记录)