uni-app中uni-data-picker组件bug：当localdata只有一层且readonly为true时，v-model绑定的数据无法选中。

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app中uni-data-picker组件bug：当localdata只有一层且readonly为true时，v-model绑定的数据无法选中。

开发环境 版本号 项目创建方式
Mac 11.6.5 (20G527) HBuilderX

操作步骤：

直接使用官网的例子，把dataTree改为单层（没有children），加上readonly属性就能复现。

<template>  
    <view>  
        <uni-section title="本地数据" type="line" padding style="height: calc(100vh - 100px);">  
            <uni-data-picker placeholder="请选择班级" :localdata="dataTree" v-model="classes" readonly="true">  
            </uni-data-picker>  
        </uni-section>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            classes: '1-0',  
            dataTree: [{  
                    text: "一年级",  
                    value: "1-0"  
                },  
                {  
                    text: "二年级",  
                    value: "2-0"  
                },  
                {  
                    text: "三年级",  
                    value: "3-0"  
                }  
            ]  
        }  
    }  
}  
</script>  

<style>  

</style>

预期结果：

设置readonly="true"时，也能选中


### 实际结果：


设置readonly="true"时，未能选中

bug描述：

uni-data-picker 版本
2.0.1（2024-08-22）

  • 修复 uni-app-x v-model 没有更新传入值的 bug

当uni-data-picker本地数据只有一层（没有children）时，将readonly设置为true，则不会选中v-model绑定的数据。

把源码改成图片的逻辑就好了，但是不清楚删掉了逻辑是不是要兼容之前的版本。请code owner帮忙看看。


Harmonyos Next教程
1 回复

在uni-app中使用uni-data-picker组件时，如果遇到localdata只有一层且readonly为true时，v-model绑定的数据无法选中的情况，这通常是由于组件内部处理逻辑的限制或bug导致的。虽然直接修改组件源码不是最佳实践（特别是当使用第三方组件库时），但我们可以尝试通过一些编程技巧来绕过这个问题。

以下是一个可能的解决方案，通过动态调整readonly属性或者使用其他组件属性来间接实现需求。如果直接修改readonly属性不可行，可以考虑使用计算属性或者观察者来动态控制组件的行为。

示例代码：

  1. 模板部分（假设我们在一个Vue组件中使用uni-data-picker）：
<template>
  <view>
    <uni-data-picker
      v-model="selectedValue"
      :localdata="localData"
      :readonly="isReadOnly"
      @change="handleChange"
    />
    <button @click="toggleReadOnly">Toggle Readonly</button>
  </view>
</template>
  1. 脚本部分：
<script>
export default {
  data() {
    return {
      selectedValue: '', // 初始选中的值
      localData: ['Option1', 'Option2', 'Option3'], // 本地数据，只有一层
      isReadOnlyInitially: true, // 初始的readonly状态
    };
  },
  computed: {
    isReadOnly() {
      // 根据需要动态计算readonly状态，这里简单使用初始值
      return this.isReadOnlyInitially;
    },
  },
  methods: {
    handleChange(event) {
      console.log('Selected Value:', event.detail.value);
      // 处理选中值变化的逻辑
    },
    toggleReadOnly() {
      // 切换readonly状态
      this.isReadOnlyInitially = !this.isReadOnlyInitially;
      // 如果readonly切换后需要重置选中值，可以在这里处理
      // if (!this.isReadOnlyInitially) {
      //   this.selectedValue = '';
      // }
    },
  },
};
</script>
  1. 样式部分（可选，根据需求添加）：
<style scoped>
/* 添加你的样式 */
</style>

说明：

  • 在这个示例中，我们通过isReadOnlyInitially数据属性来控制readonly状态，并通过一个按钮来切换这个状态。
  • 当readonly为true时，通常用户无法更改选择，但这里我们通过动态切换来模拟可能的解决方案。
  • 如果readonly属性确实存在bug，并且上述方法不适用，考虑向uni-app的开发者社区报告此问题，或者寻找是否有官方或社区提供的补丁。

注意：上述代码是一个基本的示例，具体实现可能需要根据实际需求和场景进行调整。

回到顶部