slot-scope 和 v-for on 的模糊组合使用（v-for 具有更高的优先级）。为作用域插槽使用包装器以使其更清晰答案

【问题标题】：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 clearerslot-scope 和 v-for on 的模糊组合使用（v-for 具有更高的优先级）。为作用域插槽使用包装器以使其更清晰
【发布时间】：2018-11-08 21:22:25
【问题描述】：

在我的 Nuxt.js 应用程序中，我使用 Vuetify.js。这是给我带来麻烦的一段代码：

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

触发此错误消息：

（发出的值而不是错误的实例）不明确的组合 slot-scope 和 v-for on 的使用（v-for 需要更高优先）。为作用域插槽使用包装器来制作它更清晰。

当我删除v-hover 组件时，代码运行良好。

我阅读了错误消息并尝试按照它的建议进行操作：

<template
    slot-scope="{ hover }"
    :class="`elevation-${hover ? 12 : 0}`">
    <!--
        Wrap v-list-tile-action and v-list-tile-content code here
    -->
</template>

但我遇到了其他问题。

知道如何解决它吗？

【问题讨论】：

在悬停时，所有图块都应该具有相同的类，还是只强调当前悬停的图块？
我认为您应该将v-for 放在v-hover 上或将列表包装在v-hover 中。
@BillalBegueradj 看起来很奇怪，但我问他们是否应该共享同一个班级

标签： javascript vue.js vuetify.js

【解决方案1】：

尝试将 v-for 从 v-list-tile 移动到 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>

【讨论】：