如果子元素为空，则Quasar隐藏父元素

Question

我有这个代码：

<q-expansion-item
default-opened
expand-icon="keyboard_arrow_down"
class="q-pa-none q-ma-none"
>
<template v-slot:header>
<div class="full-width text-subtitle2 text-grey q-ma-xs">Today</div>
</template>
<div
v-for="(item, indexItem) in mondayTask"
>
<TaskCard
:items="item"
v-show="item.show"
/></div
></q-expansion-item>

有时不会显示TaskCard，所以我不想显示q-expansion-item

有什么解决办法吗？

Answer 1

根据我的理解，如果show属性在mondayTask数组的所有对象中都包含false值，则需要隐藏q-expansion-item。如果是，则检查mondayTask.length将不起作用。您只需要在Array.some()方法的帮助下检查每个对象中的show属性值。

实时演示：

new Vue({
el: '#q-app',
data: {
mondayTask: [{
name: 'Task 1',
show: false
}, {
name: 'Task 2',
show: true
}, {
name: 'Task 3',
show: false
}]
}
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.9.1/dist/quasar.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quasar@1.9.1/dist/quasar.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"/>
<div id="q-app">
<q-expansion-item
v-if="mondayTask.some(({ show }) => show)"
default-opened
expand-icon="keyboard_arrow_down"
class="q-pa-none q-ma-none"
>
<template v-slot:header>
<div class="full-width text-subtitle2 text-grey q-ma-xs">Today</div>
</template>
<div v-for="(item, indexItem) in mondayTask" :key="indexItem">
<q-card v-show="item.show">
<q-card-section>
{{ item.name }}
</q-card-section>
</q-card>
</div>
</q-expansion-item>
</div>

要玩上面的代码片段，只需将mondayTask数据对象的第二个对象中的show属性值从true更新为false。