代码之家 › 专栏 › 技术社区 › Billal Begueradj

slot scope和v-for on的组合用法不明确(v-for具有更高的优先级)。对作用域槽使用包装器以使其更清晰

vuetify.js vue.js javascript

0

Billal Begueradj · 技术社区 · 7 年前

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

(发出的值而不是错误实例)不明确的组合插槽范围和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>

但我面临其他问题。

1 回复 | 直到 7 年前

1

barbsan Cibi 7 年前

尝试移动 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>