uni-app picker无法读取text属性

uni-app picker无法读取text属性

开发环境 版本号 项目创建方式
Mac 13.6.6 HBuilderX
HBuilderX 4.08

操作步骤：

  • 代码逻辑

预期结果：

  • 正常显示

实际结果：

  • 报错

bug描述：

<picker class="tab-b" @change="changeMt" :value="mealtypeIndex" :range="mealtypeRange" range-key="text">
<view class="uni-input">{{mealtypeRange[mealtypeIndex].text}}</view>
</picker>  
```
Cannot read properties of undefined (reading 'text')
执行change的时候无法读取到对象属性，实际上对象是存在的。
```

更多关于uni-app picker无法读取text属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

changeMt(e) { this.mealtypeIndex = e.detail.value this.mealtypeId = this.mealtypeRange[this.mealtypeIndex].value console.log(this.mealtypeIndex, this.mealtypeRange, this.mealtypeRange[this.mealtypeIndex].text) this.mealplanId = null this.getSchoolMealplanList() },

更多关于uni-app picker无法读取text属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html


async getSchoolMealtypeList(){ let res = await this.$http({ apiName:‘getSchoolMealtypeList’ }); console.log(“getSchoolMealtypeList>>>>”, res.data) this.mealtypeRange = res.data.map(item=>{ if (!this.mealtypeId) { this.mealtypeId = item.mealtypeId } item.value = item.mealtypeId item.text = item.mealtypeName return item }) }

不是bug，已解决

在 uni-app 中使用 picker 组件时，如果你遇到无法读取 text 属性的问题，可能是因为你没有正确设置或绑定 picker 的数据。picker 组件的 text 属性通常用于显示当前选中的项，但它并不是 picker 组件本身的一个属性，而是你需要在数据中手动管理的。

以下是一个简单的示例，展示如何在 uni-app 中使用 picker 组件并正确显示选中的文本：

1. 设置 picker 组件

<template>
  <view>
    <picker mode="selector" :range="items" @change="onPickerChange">
      <view>当前选择: {{ selectedText }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3'],
      selectedText: ''
    };
  },
  methods: {
    onPickerChange(event) {
      const index = event.detail.value;
      this.selectedText = this.items[index];
    }
  }
};
</script>
回到顶部