js vue 使用 map和computed巧妙设计可选列表和已选列表的联动

2023-10-30

需求说明:
当已选列表中存在了可选列表的选项,则在可选列表中做出标记

在这里插入图片描述
在这里插入图片描述

使用map和computed的巧妙写法

otherFiledList是已选数据,fieldList是可选数据。已选数据是可选数据构成的

<div v-for="(item,index) in fieldList" :key="index" @click.native="fieldSelect(item, selectMap[item.name])">
	...
	<i v-show="selectMap[item.name]" class="el-icon-check field-check" />
</div>
...
computed: {
   selectMap: {
     get () {
       let map = {}
       this.otherFiledList.forEach(item => {
         map[item.name] = true
       })
       return map
     }
   }
 }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js vue 使用 map和computed巧妙设计可选列表和已选列表的联动 的相关文章

随机推荐

  • 【原创】【硬件电路】AltiumDesigner18规则检查含义

    文章首发于同名微信公众号 DigCore 欢迎关注同名微信公众号 DigCore 及时获取最新技术博文 Layout时最常用的错误检查 这需要在布局布线前做好规则设置 所谓磨刀不误砍柴工 尤其是在Layout时 如果违反规则 就会亮起绿色
  • vue.config.js配置详解

    1 vue inspect rule 命令获取vue config js中的chainWebpack配置项 2 vue inspect rule svg 筛选配置项 const path require path function reso
  • Rattle :基于R的数据挖掘工具(3):载入数据

    数据 数据是进行数据挖掘工作的基础 要是没有数据 那也就没什么可挖的了 当今时代 数据的丰富超乎想象 它可以是数字 也可以是文本 图像 声音 视频等各种形式的存在 但是要把数据变成知识和信息 并不是一件简单的事 关于数据的一般术语 一个数据
  • C语言有参函数调用时参数间数据传递问题

    C语言有参函数调用时参数间数据传递问题 C语言中在发生有参函数调用时 实参变量与形参变量之间的数据都是单向的 值传递 方式 包括指针变量和数组名作参数的情况 C语言要求函数的实参要有确定的值 在函数调用时给形参分配相应的内存单元 同时将实参
  • 一文讲清 c++ 之队列

    队列也是一种特殊的 表 使用队列时插入是在一端操作 而删除则是在另外一端 1 队列模型 队列的基本操作是enqueue 入队 它是在表的末端 称为队尾 插入 个元素 dequeue 出队 它是删除 并返回 表的开头 叫作队头 的元素 下图显
  • 计算机简史:从分布式到中心化的博弈螺旋

    作为应用程序开发商 我们有责任为用户的隐私和信息安全考虑 用户应该拥有控制自己信息数据的权利 这些用户数据应该在初始化的时候就被加密和保护 作者 Eric Elliott 书籍 函数式编程的兴衰 和 编程JavaScript应用 的作者 他
  • apt install命令安装失败(已解决)

    在安装virtualbox时出现如下错误 百度了许久没有找到答案 朋友指点下已解决 分享给你们 以上 在处理时有错误发生 getdeb repository N 忽略 getdeb list bck 于目录 etc apt sources
  • Transformers GitHub项目星标突破10万!新里程碑!

    点击下方卡片 关注 CVer 公众号 AI CV重磅干货 第一时间送达 点击进入 gt Transformer 微信技术交流群 转载自 新智元 编辑 桃子 导读 问世6年来 Transformer不仅成为NLP领域的主流模型 甚至成功向其他
  • c++遇到的问题剪辑

    1 VS中使用TextOutW 参数不匹配问题 BOOL CDC TextOutW int int const CString 不能将参数 3 从 const char 18 错误说明 VC程序中使用了文字输出函数 TextOut 20 2
  • centos8配置网络

    centos安装后配置网络连接 3 网络配置 3 1 查看自己主机ip 网关等信息 例如个人主机信息如下 使用ipconfig all 可以查看所有信息 包括DNS 3 2 设置vmware网络连接 vmware gt 我的计算机 gt 设
  • java.net.ProtocolException: exceeded content-length limit of XXX bytes

    场景 使用HttpURLConnection向服务器提交POST请求 模拟将评论的内容提交给服务器 url new URL http 10 0 2 2 9102 post comment HttpURLConnection connecti
  • Docker之一:账号注册

    Docker之一 账号注册 在学习Docker之前 我们需要在Docker官网注册一个账号 方便后续下载安装包等操作 在主页面点击 Sign in 注册 Sign Up 填写注册信息 然后点击 Sign Up 选择Free 如果您有需求 可
  • python读取excel文件并保存成array

    要使用xlrd包 import numpy as np import xlrd 读取excel的库 resArray 先声明一个空list data xlrd open workbook demo xlsx 读取文件 table data
  • 【SQL基础】SQL增删改查基本语句

    目录 1 SQL 增删改查基本语句 2 select 语句 2 1 select 基本语句 2 2 Select where 语句 2 3 Select order by 语句 2 4 Select group by 语句 3 Select
  • 求解决,ubuntu16.04 文件“桌面/文档/下载/图片…”切换为英文,出现无法打开的空链接文件,错误报告以及显示

    文章参考 ubuntu下面 将汉字桌面 下载 换成 英文 https blog csdn net tanhuanzheng article details 103557287 ubuntu16 04 vmware虚拟机 1 我们可以先将目录
  • Ubuntu 16.04配置国内高速apt-get更新源

    Ubuntu 16 04下载软件速度有点慢 因为默认的是从国外下载软件 那就更换到国内比较好的快速更新源 就是这些软件所在的服务器 一般直接百度Ubuntu更新源就能出来一大堆 这时候最好是找和自己Ubuntu版本一致的更新源 我的Ubun
  • MFC入门基础(九)消息对话框、文件对话框

    一 消息对话框主要是两种CWnd MessageBox 和AfxMessageBox 下面是在按钮点击事件中添加MessageBox的效果 如下 void Ctest02Dlg OnBnClickedAddButton TODO 在此添加控
  • form表单 input输入框及属性

  • 启动Hadoop时一直提示输入密码的问题(SSH配置)

    目录 1 首先检查自己是否有配置本地ssh免密登录 2 另外一种方式 科普 什么是SSH 情况如下图所示 经常弹出要要我输入password 1 首先检查自己是否有配置本地ssh免密登录 a 下载SSH服务 yum install open
  • js vue 使用 map和computed巧妙设计可选列表和已选列表的联动

    需求说明 当已选列表中存在了可选列表的选项 则在可选列表中做出标记 使用map和computed的巧妙写法 otherFiledList是已选数据 fieldList是可选数据 已选数据是可选数据构成的 div i class el ico