Vue js V-for loop on arrays

Level 104

You will need nested loops the get to the objeects:

<div v-for="items in dataReceived.data">
    
    <div v-for="object in items">
        {{ object.property }}
    </div>

</div>

realrandyallen

Level 44

I'd use a computed property to flatten your data, it'll make your loop clean

<template>
    <div>
        <ul>
            <li v-for="row in flattened">{{ row.var }}</li>
        </ul>
    </div>
</template>

<script>

export default {
    data () {
        return {
            dataReceived: {
                data: [
                    [{
                        var: 'test'
                    }],
                    [{
                        var: 'test2'
                    }],
                ]
            }
        }
    },
    computed: {
        flattened() {
            return _.flatten(this.dataReceived.data);
        }
    },
}
</script>

Either that or use a nested loop

Level 1

it's inside a table, and i already tried the following.

" @{{item.id}}

i am not getting any result on table, plus i am getting an error:

[Vue warn]: Property or method "items" is not defined on the instance but referenced during render....

Level 104

How or where is dataReceived getting assigned to the instance? Can you post all (or the relevant parts) of the Vue component?

Level 1

@TYKUS - it's assigned on the data section of vue as empty, and getting values with axios.

How i can post code here?

Level 104

Wrap your code in (```) backticks (backticks should be on their own lines).

Do you have the two form loops like my post describes; items is instantiated by the first (outer) for loop.

Level 1

@TYKUS - <tr v-if="dataReceived !== ''" v-for="items in dataReceived.data"> <tr v-for="item in items"> <td>@{{item.id}}</td> </tr> </tr>

Capture1

Level 104

Looks fine to me. I would be checking that dataReceived haslength` - as you are expecting it to be an array.

Why do you have a <tr> inside a <tr>?

Level 1

@TYKUS - i am using 2 <tr> because i am getting grouped data and i want to make table grouped. Some arrays have 1 object inside, others have more.

The time i am using axios to get the data from server, that time i get the error on vue.

*Update: i used <div> and it worked. So it's not working with <tr>...

Capture

Level 104

You can have multiple <tbody> elements for grouping data in a table.

Just set the initial value of dataReceived to an empty array; remove the v-if check, using just the v-for the inner loop will not do anything if there is nothing in dataReceived.

Whenever your AJAX request responds, set the value of this.dataReceived = response.data in the success promise

Level 1

@TYKUS - I will make multiple tbodies elements!

As for the other, i already done that.

Thanks!