Question

在v菜单中切换两个不同的激活器模板时

<v-menu offset-y>
  <template v-if="mini" v-slot:activator="{ on }">
    <v-list-item  v-on="on">
      <v-list-item-content>
        <v-list-item-title>Jane Smith</v-list-item-title>
        <v-list-item-subtitle>Logged In</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
  </template>
  <template v-else v-slot:activator="{ on }">
    <v-btn v-on="on">
      Login
    </v-btn>
  </template>
  <v-list>
    <v-list-item>Position 1</v-list-item>
    <v-list-item>Position 2</v-list-item>
    <v-list-item>Position 3</v-list-item>
  </v-list>
</v-menu>

我们让它们每个都在切换回之后消失了。

只有在每个模板中都有相同的根元素时，所有方法才有效。

这是针对Vuetify 2.0.3

示例：https://codepen.io/anon/pen/aeyeNv 尝试使用“单击我”按钮进行切换。

Answer 1

我无法说出vuetify为什么不能处理另一种子元素，我也没有研究源代码。

但是，如果您希望它与其他根元素一起使用，则可以使用mini变量作为父元素（v-menu）的键，它将重新创建组件，因此它赢得了没问题

<v-menu offset-y :key='mini'>
  ...
</v-menu>

这有点骇人听闻，但它确实有效，有时就足够了……

在v菜单激活器中使用不同模板切换v-if和v-else时元素消失

1 个答案: