首页 > 其他分享 >伙伴匹配系统踩坑日记4

伙伴匹配系统踩坑日记4

时间:2024-08-18 23:29:07浏览次数:10  
标签:匹配 伙伴 text children 日记 parentTag originTagList id const

伙伴匹配系统踩坑日记4

前端页面编写

需要实现一个搜索的searchPage页,包含搜索标签的功能,代码如下

const originTagList = [
  {
    text: '性别',
    children: [
      { text: '男', id: '男' },
      { text: '女', id: '女' },
    ],
  },
  {
    text: '年级',
    children: [
      { text: '大一', id: '大一' },
      { text: '大二', id: '大二' },
      { text: '大3', id: '大3' },
      { text: '大4', id: '大4' },
      { text: '大5', id: '大5' },
      { text: '大6', id: '大6' },
      { text: '大7', id: '大7' },
      { text: '大8', id: '大8' },
    ],
  },
]

let tagList = ref(originTagList);

const onSearch = (val) => {
  tagList.value=originTagList.map(parentTag => {
    const tempChidren=[...parentTag.children];//es6的语法,表示将parentTag.children中的元素取出,放到新的数组里
    const tempParentTag=[parentTag];
    tempParentTag.children = tempChidren.filter(item => item.text.includes(searchText.value));
    return tempParentTag;
  });
  //测试打平效果,扁平化
/*  console.log(tagList.flatMap(parentTag => parentTag.children))*/

}
const onCancel = () => {
  searchText.value='';
  tagList.value=originTagList;
}

但是报错了

image-20240805212202656

检查代码,发现是这里出错了,parentTag使用大括号包裹的,是一个对象

image-20240805212244154

改成这样

image-20240805212351535

image-20240805212330271

标签:匹配,伙伴,text,children,日记,parentTag,originTagList,id,const
From: https://www.cnblogs.com/vastjoy/p/18366368

相关文章

  • 伙伴匹配系统踩坑日记6
    伙伴匹配系统踩坑日记6如图,点击左上角返回按钮之后就回到主页了。显然不对查看逻辑路由变化是constonClickLeft=()=>{router.push('/')}改成constonClickLeft=()=>{router.back()}knife4j导入不上,一直报错mvc:pathmatc......
  • 伙伴匹配系统踩坑日记5
    伙伴匹配系统踩坑日记5前端这么写下面三个小组件点击之后没有跳转逻辑<van-tabbarroute@change="onChange"><van-tabbar-itemto="/"icon="home-o"name="index">主页</van-tabbar-item><van-tabbar-itemto="/team"......
  • [Python学习日记-8] 读取用户指令和格式化输出
    简介    平常我们在网上冲浪是经常会遇到需要我们输入数据,然后来进行交互的,而我们本篇要说的读取用户指令就是在命令行当中程序和用户进行交互的一种方法,表现形式就像使用shell登录linux时需要你输入用户名和密码然后回车确认的那种形式。而在输入前一定是需要说......
  • Mybatis学习日记-day7-动态sql
    一、学习目标        在之前的学习中,使用的都是静态sql,而动态SQL相比静态SQL具有多个显著的优点。    首先。,动态SQL允许根据程序运行时的条件和需求来动态地生成SQL语句。这意味着它可以根据不同的情境和需求生成不同的SQL语句,从而提供更高的灵活性和适应......
  • python-深层遍历文件夹通过Excel某一列匹配文件夹中的图片(png\jpg)+写入Excel+超链
    目录专栏导读库的介绍背景库的安装完整代码总结专栏导读......
  • 22.给定 n 对括号,实现一个算法生成所有可能的正确匹配的括号组合
    22.GenerateParentheses题目给定n对括号,编写一个函数生成所有可能的正确匹配的括号组合。例如,当n=3时,可能的组合集合为:["((()))","(()())","(())()","()(())","()()()"]题目大意给出n代表生成括号的对数,请你写出一个函数,使其能够生成所有......
  • 计算不同金字塔级别下图像匹配所需的时间
    下述代码是使用HALCON软件编写的,HALCON是一款用于机器视觉和图像分析的高级软件。代码的目的是创建一个由两张图像拼接而成的图像马赛克(mosaic),并计算不同金字塔级别下图像匹配所需的时间。ImgPath:=‘3d_machine_vision/mosaic/’ImgName:=‘bga_r_’Times:=[]......
  • 杭电基础100题(2000~2099)C++ 本萌新的刷题日记
    开始之前本人是刚学完C++基础语法的萌新,从B站了解到了杭电的100道水题基础题,于是打算开始刷题并在这里写下解题思路和一些想法,以便日后回顾,顺便分享给大家。我的计划是一天15题。这是我第一次在CSDN上发文章,还不是很熟悉怎么编辑。基本上每一题都会把代码和感想放这里。200......
  • YU考公日记
    行测-第二讲第一章:判断推理第八节 逻辑判断-削弱型、加强型补充力度比较:本质>现象必然>可能量大>量小直接>间接综合>单一第九节 逻辑判断-解释型题型特征:问法为:以下哪项为真,最能解释题干中的现象?、题干现象最可能的原因是?解题思路:第一步:找到题干中需要解释的现......
  • 力扣面试经典算法150题:找出字符串中第一个匹配项的下标
    找出字符串中第一个匹配项的下标今天的题目是力扣面试经典150题中的数组的简单题:找出字符串中第一个匹配项的下标题目链接:https://leetcode.cn/problems/find-the-index-of-the-first-occurrence-in-a-string/description/?envType=study-plan-v2&envId=top-interview-......