在 v-for 中渲染块只在对象上一次 vue.js?

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>