Iterate over multiple lists simultaneously using vue.js

Question

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     |
| ------- | ----------- |

I need to display them, but what is the difference? If I can iterate over them, wouldnt I be able to display them also? — niksrb
– niksrb, Commented Oct 8, 2018 at 12:25

tony19 · Accepted Answer · 2022-07-15 22:02:06Z

4

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.

edited Jul 15, 2022 at 22:02

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 8, 2018 at 12:28

Erik Terwan

2,79020 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

subhasis · Accepted Answer · 2018-10-08 12:29:25Z

3

This should work

<div v-for="(A, index) in listA>
    <span>A value is: @{{A}}</span>
    <span v-if="listB[index]'>B value is: @{{listB[index]}}</span>
</div>

answered Oct 8, 2018 at 12:29

subhasis

2981 silver badge7 bronze badges

Comments

Snowappix · Accepted Answer · 2020-04-02 19:10:35Z

0

That worked for me! :)

I have two arrays with the same number of elements.

<div
      v-bind:key="index"
      v-for="(example, answer, index) in currentQuestion.examples"
    >
      <div class="row">
        <div class="col-md-6">
          <p>
            <button class="btn btn-secondary btn-lg btn-block">
              {{ example }}
            </button>
          </p>
        </div>
        <div class="col-md-6">
          <p>
            <button class="btn btn-secondary btn-lg btn-block">
              {{ currentQuestion.answers[index + 1] }}
            </button>
          </p>
        </div>
      </div>
    </div>

answered Apr 2, 2020 at 19:10

Snowappix

531 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

Iterate over multiple lists simultaneously using vue.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related