picker组件在uni-app编译有问题

picker组件在uni-app编译有问题

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

产品分类：uniapp/小程序/微信

操作步骤：

参照BUG 描述

预期结果：

希望编译后运行正常

实际结果：

编译后运行不正常

bug描述：

在uni-app x中写入

<picker name="relationship" :value="personal.relationship" :range="relationship" range-key="name" [@change](/user/change)="chooserelationship">  
    <text>{{relationship[personal.relationship]}}</text>  
</picker>

更多关于picker组件在uni-app编译有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

试试原生微信小程序有没有这个问题

更多关于picker组件在uni-app编译有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


进一步调试，定位到了range-key属性的设置问题，设置为空就显示出来了。需要把这篇帖子删掉吗？还是说调整HX的编译兼容机制？

回复 易者: 不用

在uni-app x中，picker组件的value属性需要绑定的是range数组的索引值，而不是直接的对象值。根据你的代码，有几个问题需要修正：

  1. :value="personal.relationship" 应该绑定的是relationship数组的索引
  2. {{relationship[personal.relationship]}} 这种写法在uni-app x中可能无法正确解析

建议修改为：

<picker 
    name="relationship" 
    :value="relationshipIndex" 
    :range="relationship" 
    range-key="name" 
    @change="chooserelationship">
    <text>{{ relationship[relationshipIndex]?.name || '请选择' }}</text>
</picker>

在script部分：

data() {
    return {
        relationship: [
            {name: '选项1'},
            {name: '选项2'}
        ],
        relationshipIndex: 0
    }
},
methods: {
    chooserelationship(e) {
        this.relationshipIndex = e.detail.value
    }
}
回到顶部