I have this code:

<q-expansion-item
  default-opened
  expand-icon="keyboard_arrow_down"
  
>
      <template v-slot:header>
        <div >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?

CodePudding user response：

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/[email protected]/dist/quasar.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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"
                    
                    >
    <template v-slot:header>
      <div >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.