-1

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>
outzo
  • 1
  • 3
  • What is your error? What do you want us to understand by "not allowing my attempt" – Wimanicesir Feb 24 '23 at 13:16
  • can only appear at the root level inside the receiving component 75 | 76 | – outzo Feb 24 '23 at 13:20
  • "v-slot can only appear at the root level". your code shows nested v-slots. `v-slot:item.menu`, `v-slot:item.custo`, `v-slot:item.tt_custo` are all nested inside `v-slot:item`. That is not the proper syntax and is causing your error. also in the future please paste extra code/error information in your question where it can be properly formatted. it's very hard to read in a comment. – yoduh Feb 24 '23 at 14:42

1 Answers1

0

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>
outzo
  • 1
  • 3