vue v-for中遍历两个数组（使用类似于python中的zip操作）_在一个标签上循环两个数组

问题

在做前端的时候遇到一个需求，也就是需要将一长串字符串切分成一个数组，然后显示不同类型的标签，最后变成这样一个效果（我用的是vue+element_ui）

原来标签的字符串如下：WD|西部数据|硬盘

思考

​ 因为这个时候数据类型都是数组，类型为一个标签，标签文本为一个值，但是v-for中不能进行两个循环，所以核实后需要使用一个循环将两个值都得到,这时候可以在v-for中使用一个js函数，然后在js函数中返回一个数组。

解决方案

<div class="tag-group">
<el-tag
    v-for="(tag) in myMethod(item.tags.split('|').slice(0,3),types)"
    :type=tag[1]
>
  {{  tag[0]  }}
</el-tag>
</div>	
1
2
3
4
5
6
7
8

mythod:

public myMethod(tags:any,types:any){
    var c = tags.map(function(e: any, i: number) {
        return [e, types[i]];
    });
    return c
}
1
2
3
4
5
6

method中的方法实现如下:

var a = [1, 2, 3]
var b = [a, b, c]
1
2

method(a,b)=>

[[1, a], [2, b], [3, c]]
1

当然，这其实不是一种非常好的实现方式，应该在后端中就将数据修改为正确格式。