2***@qq.com
2***@qq.com
  • 发布:2023-04-04 10:59
  • 更新:2023-07-11 15:52
  • 阅读:2338

vue3 使用uni-data-picker 在小程序中,localdata数据不展示

分类:uni-app

vue3 使用uni-data-picker 在小程序中,localdata数据不展示

2023-04-04 10:59 负责人:无 分享
已邀请:
星拾夜暝

星拾夜暝

localdata 不支持数组类型的数据,而 Uni-Data-Picker 中的 data 组件是以数组形式进行展示的,所以才导致了 localdata 数据不展示的问题。
解决:把数组类型的数据转换成字符串类型的数据,然后再进行传递

  • 2***@qq.com (作者)

    我按照的你们案列来的呀

    2023-04-04 11:22

星拾夜暝

星拾夜暝

注意说明:1.localdata 中的数据是否是一个数组,且每个元素都是一个对象,对象中需要包含 name 和 value 两个属性,如下所示:

[  
  { name: '选项1', value: 'option1' },  
  { name: '选项2', value: 'option2' },  
  { name: '选项3', value: 'option3' },  
]

2.localdata 中的数据是否正确,可以在控制台打印出来检查一下。
3.确认 uni-data-picker 组件的属性是否正确设置,包括 localdata、default-index、title 等属性。

星拾夜暝

星拾夜暝

是单独安装的插件?

  • 2***@qq.com (作者)

    用的vue3 cli化,npm下载的

    2023-04-04 11:41

  • 2***@qq.com (作者)

    回复 2@qq.com: 回复 2@qq.com: npm下载的整个uni-ui

    2023-04-04 11:42

星拾夜暝

星拾夜暝

npm是安装的uni3版本吗

  • 2***@qq.com (作者)

    没有看见文档哪里又说安装uni3版本的

    2023-04-04 11:53

星拾夜暝

星拾夜暝

测试是正确的

  • 2***@qq.com (作者)

    npm i @dcloudio/uni-ui 是这样安装的吗

    2023-04-04 11:57

  • 星拾夜暝

    回复 2***@qq.c引入uni了吗

    2023-04-04 12:04

  • 2***@qq.com (作者)

    回复 星拾夜暝: 没引入我弹窗怎么能显示?

    2023-04-04 12:19

星拾夜暝

星拾夜暝

<template>  
    <view class="content">  
        <view class="text-area">  
            <uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange"  
                @nodeclick="onnodeclick"></uni-data-picker>  

        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                items: [{  
                        text: "一年级",  
                        value: "1-0",  
                        children: [{  
                                text: "1.1班",  
                                value: "1-1"  
                            },  
                            {  
                                text: "1.2班",  
                                value: "1-2"  
                            }  
                        ]  
                    },  
                    {  
                        text: "二年级",  
                        value: "2-0"  
                    },  
                    {  
                        text: "三年级",  
                        value: "3-0"  
                    }  
                ]  
            }  
        },  
        methods: {  
            onchange(e) {  
                const value = e.detail.value  
            },  
            onnodeclick(node) {}  
        }  
    }  
</script>
  • 2***@qq.com (作者)

    我直接复制过去然后效果还是跟我描述的问题一样呢,是不是npm包里面代码有问题

    2023-04-04 11:59

  • 2***@qq.com (作者)

    好像确实npm下载里面代码的问题,我把通过hb下载的uni_modules里面的uni-data-picker 组件拷贝过去覆盖就展示出来了

    2023-04-04 14:40

  • 星拾夜暝

    回复 2***@qq.com: 通过hbuilder引入吧

    2023-04-04 14:50

  • 2***@qq.com (作者)

    回复 星拾夜暝: 就是通过hbuilder引入的可以,然后我把hbuilder引入的拷贝到npm下载的那边就展示出来了

    2023-04-04 15:47

  • 星拾夜暝

    回复 2***@qq.com: 嗯嗯

    2023-04-04 18:16

  • 2***@qq.com (作者)

    回复 星拾夜暝: 请问你们修复npm下载代码不一致的问题了吗,不然其他同事npm下载使用也会展示不出来

    2023-04-06 11:42

  • 星拾夜暝

    回复 2***@qq.co我不是官方的

    2023-04-06 13:31

  • 9***@qq.com

    回复 星拾夜暝: 请问下 我从后台接收到的数据是其他字段 对应不上items里的children 这时该如何回显呢

    2023-07-11 16:50

9***@qq.com

9***@qq.com

请问下 我从后台接收到的数据是其他字段 对应不上items里的children 这时该如何回显呢

  • 2***@qq.com

    请问你的问题解决了吗,我也是一样的问题

    2023-09-14 12:10

  • 1***@qq.com

    有一个map的字段

    2023-11-07 09:27

要回复问题请先登录注册