风小舞
风小舞
  • 发布:2023-02-22 11:45
  • 更新:2023-03-03 16:41
  • 阅读:2359

uni-data-select通过v-model绑定数据,在数据未更新前,触发change事件

分类:uni-app

详细问题描述
uni-data-select 组件,通过v-model绑定数据后,选择属性, 触发change事件,在事件中查看源数据,发现源数据未更新,需要添加延迟后才有更新

重现步骤
[步骤]
代码如下:

复制代码<template>  
<view>  
<view :style="swiperStyle" class=".swiper-box">  
<swiper :current="currentView" class=".swiper-swiper" style="min-height: 100%">  
<swiper-item>  
<scroll-view scroll-y="true" style="height:100%">  
<view>  
<uni-data-select v-model="test.defaultVal" :localdata="test.list" @change="onPropItemChange(test)"></uni-data-select></view>  
</scroll-view>  
</swiper-item>  
</swiper>  
</view>  
</view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                swiperStyle: {  
                    'height': '80vh'  
                },  
                currentView:0,  
                test:{list:[{text: '是', value: 1}, {text: '否', value: 0}],defaultVal:""}  
            }  
        },  
        computed:{  

        },  
        onLoad(options) {  

        },  
        methods: {  
            onPropItemChange(prop){  
                // console.log(e);  
                console.log(this.test);  
                // console.log(this.checkTaskList);  
                setTimeout(()=>{  
                    console.log(this.test);  
                }, 1000)  

            }     
        }  
    }  
</script>  
<style></style>

[结果]
需要添加延时后,才能看到改变后的源数据。

运行环境
[HBuilder版本]
HbuilderX 3.6.18.20230117
[插件版本]
uni-data-select@1.0.5
[测试设备]
EMUI 8.0.0

2023-02-22 11:45 负责人:YUANRJ 分享
已邀请:
1***@qq.com

1***@qq.com

我今天也发现这个问题了不知道是什么原因

  • 风小舞 (作者)

    是的呢 , 干脆放弃用他的@change,换其他方法吧

    2023-03-13 10:53

1***@qq.com

1***@qq.com

目前的解决方案是不用@change 而是用@click点击事件,这样v-model可以获得改变后的值,但是会重复触发

  • 风小舞 (作者)

    我直接放弃了去监听组件的变化,在要用到select变化的数据的地方,直接用methods的方法去触发,

    2023-03-13 10:49

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

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容