热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

如何将对象项添加到计算的属性项以放置在路径参数中?

如何解决《如何将对象项添加到计算的属性项以放置在路径参数中?》经验,您有什么比较好的解决方法?

我有一个单页应用程序,该应用程序发出GET请求,并接收一个名为`offices'的对象数组,这些对象是办公室名称及其ID的列表,如下所示:

offices: [
      { office: "Blue", office_id: 1 },
      { office: "Orange", office_id: 2 },
      { office: "Red", office_id: 3 }
    ]

还有一个名为计算属性unresolvedIssuesGroupedByOffice,该属性返回如下数据:

{
   "Blue":[
      {
         "issue_id":"232121",
         "branch":"Blue"
      },
      {
         "issue_id":"231131",
         "branch":"Blue"
      }
   ],
   "Orange":[
      {
         "issue_id":"332111",
         "branch":"Orange"
      },
      {
         "issue_id":"333141",
         "branch":"Orange"
      }
   ],
   "Red ":[
      {
         "issue_id":"224444",
         "branch":"Red "
      },
      {
         "issue_id":"111111",
         "branch":"Red "
      }
   ]
}

然后,我的HTML模板将所有这些呈现到表中,如下所示:

Office Number of Unresolved Issues
{{ branch }} {{ issues.length }}

这是呈现的表格的图像:

这是我的问题:[使用JSFIDDLE进行表演]

我有一个这样的终结点:/unresolvedIssuesGroupedByOffice/{office_id}它将返回该办公室所有未解决问题的JSON对象。

我想将其office_id用作路由参数,以便用户可以单击表中的办公室名称并转到我的unresolved-issues-by-office视图。

  {
    path: '/reports/unresolved-issues-by-office/:office_id',
    name: 'unresolved-issues-by-office',
    component: () =>
      import(/* webpackChunkName: "test" */ './components/UnresolvedIssuesByOfficeList.vue'),
    props: true
  }

但是,unresolvedIssuesGroupedByOffice计算出的属性不包含office_id。如何将其与办公室“关联”,以便将office_id附加到端点?我希望这能使我理解。谢谢!


推荐阅读
  • 利用树莓派畅享落网电台音乐体验
    最近重新拾起了闲置已久的树莓派,这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多,我决定将其重新启用。恰逢落网电台进行了改版,回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐,便萌生了同样的想法。通过一番调试,终于实现了在树莓派上流畅播放落网电台音乐的功能,带来了全新的音乐享受体验。 ... [详细]
  • MongoVUE基础操作指南:轻松上手数据库管理
    本文介绍了MongoVUE的基础操作,旨在帮助用户轻松掌握数据库管理技巧。MongoVUE是一款功能强大的MongoDB客户端工具,虽然需要注册,但其用户友好的界面和丰富的功能使其成为许多开发者的首选。文中详细解释了安装步骤、基本配置以及常见操作方法,并对一些常见的问题进行了修正和补充,确保用户能够快速上手并高效使用MongoVUE进行数据库管理。 ... [详细]
  • 利用Flask框架进行高效Web应用开发
    本文探讨了如何利用Flask框架高效开发Web应用,以满足特定业务需求。具体案例中,一家餐厅希望每天推出不同的特色菜,并通过网站向顾客展示当天的特色菜。此外,还增加了一个介绍页面,在bios路径下详细展示了餐厅主人、厨师和服务员的背景和简介。通过Flask框架的灵活配置和简洁代码,实现了这一功能,提升了用户体验和餐厅的管理水平。 ... [详细]
  • 在遍历集合的过程中,若需根据特定条件对集合进行修改操作,如添加或删除元素,应特别注意避免引发 `ConcurrentModificationException` 异常。例如,在当前场景中,当集合中的对象ID与另一个集合中的对象ID不匹配时,需要向集合中添加新元素。为了避免这一异常,建议使用迭代器的 `remove` 方法或采用线程安全的集合类型,如 `CopyOnWriteArrayList`,以确保操作的安全性和一致性。 ... [详细]
  • 如何在PHP中嵌入JavaScript(2023年最新实践指南) ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • 本研究提出了一种方法,用于判断两个数组中的元素是否相同,而不考虑其顺序。该方法通过检查数组中每个元素的出现次数来实现。具体实现如下:首先验证输入参数是否为数组,然后对两个数组进行排序并逐个比较元素。若所有元素均相等,则返回 `true`,否则返回 `false`。此方法适用于需要忽略顺序的数组比较场景。 ... [详细]
  • 优化升级版数据采集与赋值方法,专为前文内容设计
    在前一篇文章中,方法的局限性主要体现在需要传递参数,并且参数数量受限。当页面布局与所需参数不匹配时,该方法将无法正常工作。为此,我们推出了优化升级版1.1,旨在解决这些问题并提高灵活性和适用性。 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • 深入解析微信小程序开发中的全局配置文件设置与优化技巧
    本文深入探讨了微信小程序开发中全局配置文件的设置与优化技巧,详细解析了 `app.js`、`app.json`、`app.wxss` 和 `project.config.json` 的功能与最佳实践。通过合理配置这些文件,开发者可以显著提升小程序的性能和用户体验。文章还介绍了如何利用这些配置文件进行模块化开发和调试,帮助开发者更好地管理和维护小程序项目。 ... [详细]
  • 在 Windows 10 环境中,通过配置 Visual Studio Code (VSCode) 实现基于 Windows Subsystem for Linux (WSL) 的 C++ 开发,并启用智能代码提示功能。具体步骤包括安装 VSCode 及其相关插件,如 CCIntelliSense、TabNine 和 BracketPairColorizer,确保在 WSL 中顺利进行开发工作。此外,还详细介绍了如何在 Windows 10 中启用和配置 WSL,以实现无缝的跨平台开发体验。 ... [详细]
  • 解决Cookie中无法存储特殊字符的问题及优化方案
    在实现购物车功能时,需要将JSON格式的数据存储到Cookie中,但由于JSON数据中包含特殊字符(如双引号),导致无法直接存储。本文提出了一种解决方案,通过编码和解码技术对特殊字符进行处理,确保数据能够安全存储并正确读取。此外,还介绍了优化Cookie存储性能的方法,以提高用户体验和系统效率。 ... [详细]
  • Go 项目中数据库配置文件的优化与应用 ... [详细]
  • 当前主流代码编辑器对JSON5标准的支持情况如何? ... [详细]
  • 本文介绍了一种利用PHP cURL库高效提取Sohu邮箱联系人列表的方法。通过设置错误报告级别、定义Cookie文件路径等关键步骤,确保了代码的稳定性和可靠性。经过实际测试,该方法在2012年3月24日被验证为有效,能够快速准确地获取联系人信息。此外,文章还提供了详细的代码示例和注意事项,帮助开发者更好地理解和应用这一技术。 ... [详细]
author-avatar
谢諭宥
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有