使用 Vant-Weapp 的 Radio 单选框,设置默认值时,出了点问题:

    <!-- 性别 -->
    <van-cell title="性别">
        <van-radio-group
            slot="value"
            name="gender"
            value="{{ gender }}"
            bind:change="genderChange"
            style="display:flex;flex-flow:row nowarp;justify-content:flex-end;"
        >
            <van-radio name="0" checked-color="#25B077" style="margin-right:40rpx;">女</van-radio>
            <van-radio name="1" checked-color="#25B077">男</van-radio>
        </van-radio-group>
    </van-cell>


    data: {
    	gender: 0,
    }

    而数据库中的的 gender,也是以 tinyInteger 类型存储:
    	0-女 | 1-男

    从后端取回来的数据:
        this.gender = user.gender

    上面的代码,看着没有任何问题。
    而且在支付页面中,在选择支付方式时,同样的 Radio 代码,只是 name 用值是:offline 和 online,设置默认值是没有任何问题的!

    所以,这次怎么调试,都不正确,很是奇怪,怀疑是 '数据类型' 的问题,所以,尝试了将 gender 设置为 '0'

    data: {
    	gender: '0',
    }

    从后端取回来的数据,连接一个空字符串,转换为 string 类型:
        this.gender = (user.gender + '')

    成功!!!


查看了下源码,发现是判断使用了 '===' 恒等,也进行了类型判断,所以导致的这个问题。记录下!

 

GitHub 加速计划 / va / vant-weapp
11
3
下载
轻量、可靠的小程序 UI 组件库
最近提交(Master分支:1 个月前 )
b7b1d5f9 Co-authored-by: liuhaihong <liuhaihong@youzan.com> 6 个月前
6eb5f272 Co-authored-by: liuhaihong <liuhaihong@youzan.com> 6 个月前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐