明了
明了
  • 发布:2021-02-02 15:29
  • 更新:2023-07-11 20:16
  • 阅读:2200

unicloud-db组件load事件回调预处理data数据

分类:uniCloud

根据unicloud-db组件简介中对load事件的描述。

load事件在查询执行后、渲染前触发,一般用于查询数据的二次加工。比如查库结果不能直接渲染时,可以在load事件里先对data进行预处理。

<unicloud-db @load="handleLoad" />  

handleLoad(data, ended, pagination) {  
  // `data` 当前查询结果  
  // `ended` 是否有更多数据  
  // `pagination` 分页信息  
}

文档或者其他示例中并未给出如何修改处理data的参考示例。

如果有需求,对load事件的回调函数的data数据项进行处理,比如增加自定义属性。需要如何处理,

代码如下:

<unicloud-db v-slot:default="{data, loading, error, options}" collection="ub-mall-product" :where="where" @load="handleLoad">  
            <view>  
                <view style="text-align: center;">  
                    <u-loading mode="circle" color="#f00" :show="loading"></u-loading>  
                </view>  

                <view v-for="item in data" :key="item._id" >  
                    <text>{{item.name}}--{{item.show}}</text>  
                </view>  

            </view>  
        </unicloud-db>  
    export default {  
...  
methods: {  
handleLoad(data, ended, pagination) {  
                data = data.map(({name,...otherProp}) => ({ //对name新增_hllo后缀,以及添加show属性  
                    name: name+"_hello",  
                    show:false,  
                    ...otherProp  
                }))  
                // return data;   
                // return {data,ended,pagination}  
            },  
}  
...  

不管有没有return 数据,以上方式均无法生效。

请问该如何处理自定义数据。

2021-02-02 15:29 负责人:无 分享
已邀请:
明了

明了 (作者)

方法改成vue.$set即可

        handleLoad(data, ended, pagination) {  
                // data = data.map(({name,...otherProp}) => ({ //对name新增_hllo后缀,以及添加show属性  
                //  name: name+"_hello",  
                //  show:false,  
                //  edit:false,  
                //  ...otherProp  
                // }))  
                data.forEach(item=>{  
                    this.$set(item,"name",item.name+"_hello");  
                    this.$set(item,"show",false);  
                })  
                // this.dataList = data;  
                // return data;  
                // return {data,ended,pagination}  
            },
黑肥先生

黑肥先生

用了楼主的方法,终于解决问题啦

  • DCloud_uniAD_HDX

    正常循环修改即可,不需要用上面的方法,组件会在你修改后执行更新

    2021-04-21 11:36

  • s***@outlook.com

    回复 DCloud_uniAD_HDX: handleLoad函数内直接修改data还是无效

    2021-05-05 18:36

  • 黑肥先生

    回复 s***@outlook.com: 使用unicloud-db组件 拿到的data,如果在script里修改,使用this.$refs.udb.dataList

    2021-05-06 19:57

  • s***@outlook.com

    回复 黑肥先生: 在@load事件内修改dalaList后,会渲染新的dataList和修改前的data(追加在后面),而不是新的dataList替代旧的data,能不能只渲染新的dataList

    2021-05-11 01:15

  • s***@outlook.com

    回复 s***@outlook.com: 暂时通过在settimeout函数里修改this.$refs.udb.dataList,然后设置为0ms解决了

    2021-05-11 01:23

2***@qq.com

2***@qq.com

我把 field去掉,然后就显示出来了

hws007

hws007 - 我就是我!

this.$refs.udb.dataList = data;

2***@qq.com

2***@qq.com

this.$refs.udb.dataList = data;
我这边这样写还是不会渲染出来,有两种可以生效,
一种之前的兄弟有提到 this.$refs.udb.dataList = data;放到 settimeout里执行,
另一种放到this.$nextTick里面执行

可以参考这个链接
https://www.jb51.net/article/273324.htm

要回复问题请先登录注册