ionic-select的坑

194 阅读2分钟

最近公司项目使用ionic来编写移动端项目,在这个过程中遇到很多坑,其中遇到最大最大的一个坑是下拉框ion-selct的赋值竟然有问题,并且能在ionic官方的社区论坛找到对应问题,而且还没解决!!这种最基本的控件居然还会有问题,而且ionic在国外是比较出名的,这种bug居然还没修复!ionic-select有什么坑呢?下面我为你们来讲解,顺便也为自己记录一下。

基本使用

老样子,上来先丢一个基本使用

image.png

image.png 现在是没有问题的,v-model绑定的值也能显示

选项延迟赋值

在所有项目中,下拉框的选项和值从接口那里拿,比如获取详情,这种是非常非常常见的,但是在ionic中这样就会有显示问题,如下:

image.png

1.gif

我们可以看到,我们先给个初始值,然后选项通过接口拿(定时器模拟),当拿到选项之后,视图并没有更新, 因为我们已经给了初始值,按道理应该显示apples的选项,但是并没有(其实值是改变了的,只是视图没更新),直到点击打开选项(并没有选择),他视图才会更新,我看了源码,他是在触发下拉框展开时会触发视图的更新,我们就知道问题其实就是没有更新视图。 那么久好办了,我第一时间想到的是调用vue的forceupdate方法强制视图更新,但是没有效果。后来我想起了,vue底层绑定dom时,是绑定标签名和key的,如果这两个其中有一个变了,那么也会触发视图的更新,所以就有了以下的解决方案

通过key更新视图

这时候就解决问题了,解决办法就是当获取到下拉选项的时候,手动修改一下key,让vue底层去更新dom。我这里只是一个例子,就是想告诉大家,当遇到视图未更新,而且数据赋值方面没问题时,可以尝试给dom绑定一个key,然后在特定的时机去修改这个key,让vue底层去更新视图。

image.png

image.png