Question

在我的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>

这会触发此错误消息：

（发出的值，而不是Error的实例）含糊不清 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>

但是我遇到了其他问题。

关于如何解决它的任何想法？

Answer 1

尝试将let end = new Date(date); let newEnd = addMinutes(end, 60); function addMinutes(date, minutes) { return new Date(date.getTime() + minutes*60000); }从v-for移到v-list-tile（demo）：

v-hover

slot-scope和v-for的组合用法含糊不清（v-for的优先级更高）。使用包装器确定作用域的插槽，使其更清晰

1 个答案: