Question

我有一个具有这种结构的对象

object: {
 "prop1": [],
 "prop2": [],
 "prop3": [],
}

在我的模板中，我想遍历它并在prop's中显示数据，但是如果其中没有数据，我想显示类似的内容

<div>No data</div>

但仅一次，而不是每个prop

到目前为止，我有这个

<div v-for="(props, index) in object" :key="index">
     <div v-if="!props.length">
        No data
     </div>
 </div>

但是对于每个道具它都会显示3次消息。
我不确定如何解决。任何帮助将不胜感激。

Answer 1

要很好地解决此问题，应使用计算属性。

计算属性基本上是一段代码，给出毫无意义的计算有意义的名称。

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;
        },
    }
};

然后可以在您的模板中使用以下内容：

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

在v-for over对象中仅一次渲染vue.js？

1 个答案: