es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Convirtiendo el activador de la ranura Vuetify 1.x a 2.x mediante v-data-table.

05 Aug, 2023 Programación

Tengo un trozo de código funcional de Vuetify 1.5.6 que incluye un icono dentro de una tabla de datos que, al hacer clic, muestra un menú. Al hacer clic, el activador muestra la lista que se activó.

Tengo un codepen con este ejemplo.

Quiero la misma funcionalidad, pero Vuetify 2 no tiene “slot=”activator””.

Parece que usan “v-slot:activator=”{ on }”” con una etiqueta de plantilla, pero no puedo replicarlo.

Este es mi intento.

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<v-data-table :headers="labels" :items="data">
  <template v-slot:[`item.statusicon`]="{ item }">
    <td style="cursor: pointer;">
      <v-icon :class="item.status">{{item.statusIcon}}
          <template v-slot:activator="{ on }">
              <v-list>
                  <v-list-item v-on="on" v-for="(status, index) in statusItems" :key="index" :class="status.title" @click="setStatus(item, status.title)">{{ status.title }}</v-list-item>
              </v-list>
          </template>
      </v-icon>
    </td> 
  </template>
</v-data-table>
<!-- end snippet -->

Definitivamente hay algo pequeño que me falta y sé que el v-icon debería estar bajo la plantilla, pero sigo obteniendo este error:

‘v-slot’ la directiva debe ser propiedad de un elemento personalizado, pero ‘td’, ‘div’, ‘template’ no lo son.

Encontré este hilo, pero aún no hay ayuda.

Se agradecería cualquier ayuda.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para agregar un activador de menú en una tabla de datos de Vuetify 2

    Para agregar un activador de menú en una tabla de datos de Vuetify 2, puedes utilizar la directiva v-slot con un elemento template. Sigue estos pasos:

    1. Reemplaza slot="activator" con v-slot:activator="{ on }" en el elemento v-icon.

    2. Envuelve el contenido del elemento v-icon con un elemento template.

    3. Coloca el elemento v-list dentro del elemento template con una directiva v-slot.

    4. Agrega el atributo v-on="on" al elemento v-list-item para pasar los event listeners al componente de sub-menú.

    Aquí tienes un fragmento de código modificado que demuestra este enfoque:

    <v-data-table :headers="labels" :items="data">
  <template v-slot:[`item.statusicon`]="{ item }">
    <td style="cursor: pointer;">
      <template v-slot:activator="{ on }">
        <v-icon :class="item.status" v-on="on">
          {{ item.statusIcon }}
        </v-icon>
      </template>
      <v-list>
        <v-list-item v-on="on" v-for="(status, index) in statusItems" :key="index" :class="status.title" @click="setStatus(item, status.title)">
          {{ status.title }}
        </v-list-item>
      </v-list>
    </td>
  </template>
</v-data-table>

    Siguiendo estos pasos, deberías poder agregar un activador de menú en tu tabla de datos de Vuetify 2.

Comments are closed.