Vue3 数据延迟显示

本贴最后更新于 926 天前,其中的信息可能已经时移俗易

问题

本人前端小白,学了一段时间 Vue3.

为了适配自己的笔记在写一个插件.但是中见遇到了一些问题.我也不懂这是个什么问题.

SIyuan 透明.gif

必须要点击两次查询才能够显示数据.

<template> 部分是用 Element-Plus 写的.只是简单的绑定了一下数据.

JS 部分的代码
  setup(){
    let blocks = ref()
    let sqlcode = ref("SELECT * FROM blocks WHERE\n" + "content like '%@Project-%'")

    let currentId= ""
    let attributes=ref([])
    let blocksAttrs=ref([])

    //执行SQL
    function getQueryResult() {
      sqlQuery(sqlcode.value).then(response => {
        blocks.value = response.data
        //获取其属性
        getAttr(blocks.value)
      })
    }
    //查询块的属性
    function getAttr(getBlocks){
      let block=null
      for (block in getBlocks){
        getBlockAttrs(getBlocks[block].id).then(response => {
          if (response.data.length != 0){
            attributes.value.push(response.data)
          }
        })
      }
      setDataView(attributes.value)
    }
    //将属性放入对象数组
    function setDataView(getAttributes){
      console.log("DataViewStart")
      let attr=null
      let attrs
      console.log(getAttributes)
      for(attrs in getAttributes){
        let blockAttrs={}
        for(attr in getAttributes[attrs]){
          let attrKey = getAttributes[attrs][attr].name
          let attrResult = getAttributes[attrs][attr].value
          blockAttrs[attrKey] = attrResult
        }
        blocksAttrs.value.push(blockAttrs)
      }
      console.log(blocksAttrs.value)
    }
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18150 引用 • 66975 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    6364 引用 • 28619 回帖 • 264 关注
被采纳的回答
  • clark-cui

    没这么复杂吧,你代码都是同步的。只有思源接口是异步的,你用 promise 包一下思源的接口,接口返回后再去执行你的代码就行。
    // 接口
    return new promise((resoleve,reject)=>{

    // 调用 api,成功 resolve(res),失败 reject(e)

    })

    // 业务代码
    siyuanapi.then(res=>{
    // your code
    }).catch(e=>{})

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • crowds21

    大佬我又来了.😭

    为什么我现在运行的时候啥事儿没有,build 之后 URL 并没有被正常替换掉.这个是和什么有关系呢,Vite 配置吗,我该配的应该都弄了.还是需要设置环境什么的.

    BECNGH4OER1X2SR.png

    1 回复
  • 其他回帖
  • clark-cui

    代码改一改吧,方便 debug。外面没有使用双向绑定的数据就别用 ref 了,多包一层 proxy 没必要,如果是多层的绑定用 reactive。循环的变量声明写括号里,let null 之类的写法,直接 let 就行,!=0 这种写法也别用,我不确定你的数据格式,如果是数组,别用 for in 来循环,用 for 循环或者 for of。如果是对象直接.就完事了,没必要写[]。不要用两个 for 循环,平方级复杂度了,看你处理啥数据了,假设是数组,用...直接解构,一个 for 循环拼起来就行;如果是对象,参考下树的遍历咋写的。

    2 回复
  • crowds21

    我试过了,第一次点击 button 的时候,setDataView 里面的 blocksAttrs 输出是 undefine.

    然后第二次点击就有数据了.

    主要是我前端不是很熟悉,我并不知道该用什么手段去解决这个问题. 比如是因为需要加一个 Promise 来限制函数的执行顺序吗?还是 ref() 用的不对?

    我就每天抽空稍微弄一弄,好几天才写了这点.😭 让我改我也整不出个头绪.

  • crowds21

    数据是访问思源接口获得的.整个过程是

    • 获取思源中特定的文本块
    • 再获取文本块的属性
    • 每个文本块的属性放入一个对象
    • 最后所有对象放入数组
    • 表格显示

    js 没怎么写过,语法规范这些我确实不熟悉,感谢老哥.

  • 查看全部回帖
crowds21
不带评论的观察是人类智力的最高形式 上海

推荐标签 标签

  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    16 引用 • 68 回帖
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    129 引用 • 793 回帖 • 1 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 5 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    40 引用 • 40 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 532 回帖 • 706 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 7 关注
  • OnlyOffice
    4 引用 • 19 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 405 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 316 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 232 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 381 关注
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1397 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 42 关注
  • 分享

    有什么新发现就分享给大家吧!

    240 引用 • 1729 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    914 引用 • 930 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 7 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 6 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    330 引用 • 614 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 33 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 255 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18150 引用 • 66975 回帖
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 3 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    215 引用 • 462 回帖