Quasar hide parent if child element is empty

Question

I have this code:

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

Sometimes there will be no TaskCard shown, so I don't want to show the q-expansion-item

Is there any solution to solve it?

Answer 1

As per my understanding, You want to hide q-expansion-item if show property contains false value in all the objects of mondayTask array. If Yes, checking for mondayTask.length will not work. You have to just check for the show property value in each object with the help of Array.some() method.

Live Demo :

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>

To play with the above code snippet, Just update the show property value from true to false in the 2nd object of mondayTask data object.