Is it possible to iterate over multiple lists simultaneously using JavaScript
? The reason why I am focusing on vue.js
is because, if this is possible, I would use it inside HTML
tag.
listA = ('itemA1', 'itemA2'); listB = ('itemB1', 'itemB2'); <div v-for="A in listA" v-for="B in listB"> <span>A value is: @{{A}}</span> <span>B value is: @{{B}}</span> </div>
EDIT:
A brief explanation how I am going to use it. This question is actually related to one that I have already asked before.
As I am going to have table with two columns, where first one is going to contain headers of the table, and second one the data, I need somehow to make them be in same row. Now if you check the question I have linked up there you should find how those tables are supposed to look like. But I’ve got a problem when I have data divided in more rows in some of those td
tags. For example:
+---------+-------------+ | Name | Christopher | | Middle Christy | | Surname | Ashton | | | Kutcher | | ------- | ----------- |
And I need to display it as:
+---------+-------------+ | Name | Christopher | | Christy | | Middle | Ashton | | Surname | Kutcher | | ------- | ----------- |
Advertisement
Answer
You could use computed properties for this.
E.g.
listA = ['itemA1', 'itemA2']; listB = ['itemB1', 'itemB2']; // add a computed property that merges the 2 arrays into a single array of objects { computed: { list() { return listA.map((itm, i) => { return { A: itm, B: listB[i] } }) } } } <div v-for="obj in list"> <span>A value is: @{{obj.A}}</span> <span>B value is: @{{obj.B}}</span> </div>
Please note that this is untested code, and unsafe, you should check if the listB has that index, e.g. if listA contains 5 items and listB 4, it would give an error.