javascriptvue.jsv-data-table

How to use v-data-table with v-if to render automatically?


I'm trying to use v-data-table with data filter but it's not allowing my attempt below,

   <v-data-table :headers="colunas" :items="form.itens" :items-per-page="15" class="elevation-1">
            <template v-if="!item.excluido" v-slot:item="{ item }">
              <template v-slot:item.menu="{ item, index }">
                <v-icon left @click="delItem(item, 'or')" color="red">fa fa-trash-alt</v-icon>
                <v-icon right @click="edtItem(item, index)" color="orange">fa fa-pencil</v-icon>
              </template>
              <template v-slot:item.custo="{ item }">
                <span class="text-green"
                  ><v-icon small color="green" left>fa-solid fa-brazilian-real-sign</v-icon></span
                >
                <span class="text-bold">{{ formVlr(item.custo) }}</span>
              </template>
              <template v-slot:item.tt_custo="{ item }">
                <span class="text-green"
                  ><v-icon small color="green" left>fa-solid fa-brazilian-real-sign</v-icon></span
                >
                <span class="text-bold">{{ formVlr(item.tt_custo) }}</span>
            </template>
          </v-data-table>

Solution

  • For utilize filter to render it necessary, determine de columns with and , example:

    <v-data-table :headers="colunas" :items="form.itens" :items-per-page="15" class="elevation-1">
                <template v-slot:item="{ item, index }">
                  <tr v-if="!item.excluido">
                    <td>
                      {{ item.menu }}
                    </td>
                    <td>