Xtykutl

In my Nuxt.js application, I use Vuetify.js. Here is the piece of code that causes me trouble:

<v-list dense>

  <v-hover>

  <v-list-tile

    v-for="menuItem in menuItems"

    :key="menuItem.title"

    slot-scope="{ hover }"

    :class="`elevation-${hover ? 12 : 0}`">



    <v-list-tile-action>

      <v-icon> {{menuItem.icon }} </v-icon>

    </v-list-tile-action>



    <v-list-tile-content>

      <v-list-tile-title>{{ menuItem.title }}</v-list-tile-title>

    </v-list-tile-content>  



  </v-list-tile>

  </v-hover>

</v-list>

That triggers this error message:

(Emitted value instead of an instance of Error) Ambiguous combined
usage of slot-scope and v-for on (v-for takes higher
priority). Use a wrapper for the scoped slot to make it
clearer.

The code works fine when I remove the v-hover component.

I read the error message and I tried to do what it suggests:

<template

    slot-scope="{ hover }"

    :class="`elevation-${hover ? 12 : 0}`">

    <!--

        Wrap v-list-tile-action and v-list-tile-content code here

    -->

</template>

But I faced other issues.

Any idea on how to fix it?

Try moving v-for from v-list-tile to v-hover (demo):

<v-list dense>

  <v-hover v-for="menuItem in menuItems">

    <v-list-tile

        :key="menuItem.title"

        slot-scope="{ hover }"

        :class="`elevation-${hover ? 12 : 0}`">



      <!-- your content -->  



    </v-list-tile>

  </v-hover>

</v-list>