【过滤器filter】通过id关联的两数组，数据不匹配的数组输出问题の解决方案

最新推荐文章于 2024-05-29 00:05:47 发布
最新推荐文章于 2024-05-29 00:05:47 发布
阅读量221 收藏
点赞数
文章标签： javascript 开发语言 vue.js vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45912372/article/details/129717053
版权

【问题现象]
Vue中使用v-for遍历数组时可能会出现两个不同数组间的关联问题，在data中定义了商品列表brandList和depList

data: {
	// 品牌列表数据
	brandList: [
		{id: 1, name: '宝马', status: 'true', depId: '101', time: new Date()},
		{id: 2, name: '奔驰', status: 'true', depId: '102', time: new Date()},
		{id: 3, name: '大众', status: 'true', depId: '103', time: new Date()},
	],
	depList: [
		{id: 101, depName: '厂家1'},
		{id: 102, depName: '厂家2'},
	]
},

使用v-for循环遍历输出时，表格中默认呈现的时没有经过匹配的brandList中的depId,当加上v-if的筛选条件后，在遍历时会出现品牌名称为大众的品牌的厂家没有对应的厂家，导致表格展现异常。
【解决方案】
配置过滤器，使用过滤器对brandList中的depId进行转换

  1. 定义全局变量that，便于过滤器选择depList
let that
  1. 在beforeCreate生命周期将this赋值给that，通过that获得depList
beforeCreate: function () {
	that = this
},
  1. 配置过滤器，对brandList中的depId进行转换
depChange(depId){
	let depName = '-'
	for(let i = 0; i < that.depList.length; i++){
		if(depId == that.depList[i].id)
			depName = that.depList[i].depName
		console.log(depName)
	}
	return depName
}
  1. 输出生产厂家时，使用过滤器进行输出
<td>
	{{brand.depId | depChange}}
</td>

【最终结果]
在这里插入图片描述

名字都没了~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
es6 filter() 数组过滤方法总结
10-17
主要介绍了es6 filter() 数组过滤方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Python数组条件过滤filter函数使用示例
12-23
比如想过滤掉字符串数组中某个敏感词，示范代码如下： #filter out some unwanted tags def passed(item): try: return item != "techbrood" #can be more a complicated condition here except ValueError: return...
两个数组id关联，把他们合并成一个数组
m0_59462557的博客
03-30 400
a = [{id:1,age:10},{id:2,age:20},{id:3,age:30}] b = [{id:3,sex:'男'},{id:1,sex:'男'},{id:2,sex:'女'}] 合并后 c = [{id:1,age:10,sex:'男'},{id:2,age:20,sex:'女'},{id:3,age:30,sex:'男'}] const a = [{id:1,age:10},{id:2,age:20},{id:3,age:30}]; const b = [{..
通过一组id匹配另一个数组中的对象
m0_46387207的博客
03-25 1852
let list1=[1,2,3,4] let list2=[ {id:1,name:‘aaa’}, {id:2,name:‘bbb’}, {id:3,name:‘ccc’}, {id:4,name:‘ddd’}, {id:5,name:‘eee’}, ] let list=[] list=list1.map(item=>list2.filter(i=>i.id==item)[0]) console.log(list)
Vue3中使用 filter 方法通过 id 删除数组中的指定对象
最新发布
李长渊的博客
05-29 1045
Vue3中使用 filter 方法通过 id 删除数组中的指定对象
filter()方法 根据某一数组ID 获取到另一数组的参数
崔崔的博客
11-06 2270
vue.list.filter(item=> { data.filter(items=> { if (item.ID === 100) { if(item.NAME == items.NAME){ vue.listOne = items.DAY_USE_SUM; } } ...
Vue利用递归的方法，根据id获取对应的字段名(树形数据)
m0_46693606的博客
04-13 6114
树形数据源 options:[ { id: 1, name: '一级1', children: [ { id: 4, name: '二级1', }, { id: 5,
数组对象中找出id不一致的那个对象
qq_37427529的博客
08-28 1052
var arr1=[{“id”:”1”,”name”:”哈哈哈”} ,{“id”:”a1”,”name”:”辅导费”} ,{“id”:”2”,”name”:”哦哦”} ] var arr2=[{“id”:”21”,”name”:”哈哈哈”} ,{“id”:”abc”,”name”:”辅导费”} ,{“id”:”2”,”name”:”哦哦”} ] var res = arr2.filter(n ...
详解AngularJS中$filter过滤器使用(自定义过滤器)
12-09
1.内置过滤器 * $filter 过滤器，是angularJs中用来处理数据以更好的方式展示给我用户。比如格式化日期，转换大小写等等。...* filter 过滤的数据一般是数组，数组中的数据可以是对象，字符串等 * orderBy 排序根据数
php中使用array_filter()函数过滤空数组的实现代码
10-25
可以看到，`false`、`null`、空字符串`''`、空数组`array()`和零`0`都已经被过滤掉了，只留下了非空且不等同于`FALSE`的元素。 使用`array_filter()`函数时，需要注意的是，它不会改变原始数组，而是返回一个新的...
详解JS取出两个数组中的不同或相同元素
10-17
我们通过比较 `indexOf()` 和 `lastIndexOf()` 的结果来确保元素只出现一次，这样就可以过滤出两个数组中的独特元素。 **2. 取出两个数组的相同元素：** ```javascript function getArrEqual(arr1, arr2) { let ...
A数组中的子数组中的id,与B数组中的id匹配,并过滤出B数组对应id的数据
zhangyuge_zhou的博客
08-11 504
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
两个数组对比，根据id字段名查出来
weixin_35755434的博客
02-14 592
两个数组的比较通常可以使用遍历和查找的方法。 首先遍历第一个数组，对于每个数组元素，在第二个数组中查找是否存在一个元素的 "id" 字段值与它相同。如果找到，则说明两个数组有相同的元素，可以选择记录下来或执行其他操作。 具体实现方法可以使用 for 循环或数组方法(例如 Array.prototype.forEach())等。 ...
vue 过滤器(filter)的使用
qq_36437172的博客
08-10 694
| 符号前面是过滤器的传参，后面是过滤器的返回值。 使用方式： <!-- 在双花括号中 --> <div>{{ message | formatDate }}</div> <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatDate"></div> 很多时候，后...
将数组中id相匹配的筛选出来
LRQQHM的博客
03-02 665
// 将id相匹配的筛选出来 const list = [{id: 1, name:2}, {id: 2, name:2}] const result = [1,2] list.filter(item =>result.includes(item.id))
使用过滤filter嵌套过滤出数组对象数组里面某个字段
qq_43486347的博客
11-09 2299
vue3.0写法 let values = state.nameList.filter((v: any) => { if (v.children) { v.children = v.children.filter((d: any) => { return d.nickName.includes(state.formInline.initiator); }); return v.children.length; } return v
vue过滤器filter
SugarXiXixi的博客
11-01 195
过滤器filter 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <!-- :id被绑定的属性 （如style，href 等） rawId data中的值 formatId 过滤器中的值 --> <div v-bind:id="rawId | formatId"></div> 全局过滤
js数据不同步问题
qin_never_give_up的博客
10-18 596
      本人逻辑较差，前端也特别差，遇到一些不合常理的事情，找半天都不知道该如何解决。正是在其中不断解决不断进步。一个for循环不同步，里面的取值传到后面的界面一直是数组最后一个值。最终使用委托解决掉了。 起初是传的values[i]，下一个界面获取到的一直是数组最后一个值，最终通过委托解决，解决代码如下（划线部分）： ...
vue中数组用什么代码输出_Vue数组响应式操作及高阶函数使用代码详解
weixin_42116701的博客
02-22 284
数组的响应式操作//this.letters.push('123');//在末尾添加一个元素//this.letters.pop();//从末尾删除一个元素//this.letters.unshift('111');//在开端添加一个元素//this.letters.shift();//从开端删除一个元素//this.letters.splice(1,2);//从下标为1的元素开始删除两个元素//...
filter方法过滤出id=1的数组
03-28
假设有一个包含多个对象的数组，每个对象都有一个id属性，我们可以使用filter方法来过滤出id为1的对象。 示例代码如下： ```javascript const arr = [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }, { id: 1, name: '赵六' }, ]; const filteredArr = arr.filter(obj => obj.id === 1); console.log(filteredArr); // [{ id: 1, name: '张三' }, { id: 1, name: '赵六' }] ``` 在上面的代码中，我们定义了一个数组arr，其中包含了多个对象，每个对象都有一个id属性。 然后我们使用filter方法来过滤出id为1的对象，具体实现是在filter方法的回调函数中，通过判断obj.id是否等于1来决定是否保留该对象。 最终的结果是一个新的数组filteredArr，其中只包含了id为1的对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值