[Vuejs]-Render block in v-for over object only once vue.js?

by

0👍

To solve this in a nice way, you should use a computed property.

A computed property is basically a piece of code that give meaningless caclulations meaningful names.

export default {
    data() {
        return {
            object: {
                "prop1": [],
                "prop2": [],
                "prop3": [],
            },
        };
    },
    computed: {
        areAllEmpty() {
            return Object.values(this.object).map(e => e.length).reduce((a, b) => a + b, 0) === 0;
        },
    }
};

This can then be used in your template as the following:

<template>
    <template v-if="areAllEmpty">
        <div>No data</div>
    </template>
    <template v-else>
        <div v-for="(props, index) in object" :key="index">
             I'm index {{ index }} with length {{ props.length }}
        </div>
    </template>
</template>
👤Ferrybig

Leave a comment