vue.jsvuetify.jsv-data-tablev-slot

Converting Vuetify 1.x v-slot activator to 2.x via v-data-table


I have a piece of working code from Veutify 1.5.6 that includes an icon inside of a data table that, when clicked, displays a menu. When clicked the activator shows the list that was activated.

I have a codepen with this example

I want the same functionality, but Vuetify 2 does not have slot="activator".

It looks like they use v-slot:activator="{ on }" with a template tag, but I can't get this replicated over.

This is my attempt at it.

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

There's definitely something small I'm missing and I know that the v-icon should be under the template, but I keep getting this error

'v-slot' directive must be owned by a custom element, but 'td', 'div', 'template' is not

I found this thread, but still no help.

Any help would be appreciated


Solution

  • You should wrap the icon with v-menu component then use this icon as menu activator :

    <v-menu offset-y>
           <template v-slot:activator="{ on, attrs }">
             <v-icon   v-on="on" :class="item.status">{{item.statusIcon}}
             </v-icon>
            </template>
            <v-list>
                      <v-list-item
                    
                      v-for="(status, index) in statusItems"
                      :key="index"
                      :class="status.title"
                      @click="setStatus(item, status.title)"
                      >{{ status.title }}></v-list-item>
            </v-list>
    </v-menu>