CODEWITHSUNDEEP
vue.jsfor-loop
gazarii
gazarii

Reputation: 1

Vue.js - how to use 2 for-loop?

This is my code.

<b-tbody v-for="(item, index) in list" :key="index>
 <b-tr>
  <b-td></b-td>
 </b-tr>
 <b-tr v-for="(item2, index) in list2" :key="index">
  <b-td></b-td>
 </b-tr>
</b-tbody>

I think first loop is going well, but next one doesn't work. what can i do ?

Upvotes: 0

Views: 181

Answers (3)

MaBbKhawaja
MaBbKhawaja

Reputation: 902

Please share what you are trying to acheive so i could send a proper example

<b-tbody v-for="(item, index) in list" :key="index+'_table'">
 <b-tr v-for="(item2, rowIndex) in list2" :key="rowIndex+'_row'">
  <b-td></b-td>
 </b-tr>
</b-tbody>

Upvotes: 0

Morgan
Morgan

Reputation: 52

The second loop actually works (d, e, f) but what are you trying to achieve ?

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="app">
        <b-tbody v-for="(item, index) in list" :key="index">
            <b-tr>
                <b-td>{{ item }}</b-td>
            </b-tr>
            <b-tr v-for="(item2, index) in list2" :key="index">
                <b-td>{{ item2 }}</b-td>
            </b-tr>
        </b-tbody>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: ['a', 'b', 'c'],
                list2: ['d', 'e', 'f']
            }
            })
    </script>
</body>
</html>

Upvotes: 0

Ehrlich_Bachman
Ehrlich_Bachman

Reputation: 932

You are missing the closing quotation marks at the first :key="index.

Do you get anything if you run:

<b-tbody v-for="(item, index) in list" :key="index">
 <b-tr>
  <b-td>{{ item }}</b-td>
 </b-tr>
 <b-tr v-for="(item2, index) in list2" :key="index">
  <b-td>{{ item2 }}</b-td>
 </b-tr>
</b-tbody>

... depending of course, how your lists are structured ... but you should now see something, where {{ item }} is.

Upvotes: 1

Related Questions