v-list中的v-list无法与vuetify一起使用

Question

我正在尝试使用vuetify实现列表中的列表。但是我没有设法使其工作。下面是代码和示例数据。请帮助我使它工作。我正在使用vuetify 2.3.10。如果我将第二个列表的部分注释掉，则第一个列表有效

    <template>
      <div>
        <v-toolbar id="filter">
          <v-layout row wrap>
            <v-flex xs12 md1>
              <v-menu attach="#filter-users" offset-y>
                <template v-slot:activator="{ on, attrs }">
                  <div class="dropdown" v-bind="attrs" v-on="on">User</div>
                </template>
                <v-list id="filter-users">
                  <v-list-item
                    v-for="search_user in search_users"
                    @click="filterUser({user: search_user})">
                    <v-list-item-title>{{ search_user.name }}</v-list-item-title>
                  </v-list-item>
                  <v-list v-if="search_user.sub_users.length">
                    <v-list-item v-for="(search_sub_users, index) in search_user.sub_users"
                                 :key="`sub_user_${index}`"
                                 @click="filterUsers({user: search_sub_user})">
                      <v-list-item-title>{{ search_sub_user.name }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-list>
              </v-menu>
            </v-flex>
          </v-layout>
        </v-toolbar>
      </div>
    </template>

search_users演示数据

search_users:[{
  name: 'James',
  sub_users: [
    {
    name: 'Willy'
    },
    {
    name: 'Jack'
    },
  }]
 },
 name: 'Rock',
 sub_users: [
   {
    name: 'Randy'
    },
    {
    name: 'Amy'
    },
  }]
],

Answer 1

您的代码中发生了很多事情，所以让我为您枚举它们：

1. 在第二个子列表上，找不到search_user变量，因为该变量只能在<v-list-item/>之外的<v-list/>内部访问。

   您可以做的是创建一个<template/>，它将同时包裹<v-list-item/>和<v-list/>，然后将v-for放在此处。像这样：

   <v-list ...>
   
     <template v-for="(search_user, index) in search_users">
       <v-list-item :key="`user_${index}`">...</v-list-item>  <!-- User List -->
       <v-list :key="`sub_user_${index}`">...</v-list>        <!-- Sub User List -->
     </template>
   
   </v-list>
   

   此外，请不要忘记v-bind:key的子元素中的:key或仅仅是v-for。

2. 您尝试将<v-menu/>附加到其默认插槽。 attach的{​​{1}}属性应位于<v-menu/>之外或其激活器插槽内。但是，默认情况下，它应该直接连接到激活器插槽中的元素，因此您可以省略<v-menu/>道具。

   attach

3. 在第二个子列表上，您错误地键入了<v-menu offset-y> <!-- remove the `attach` prop --> <template v-slot:activator="{ on, attrs }"> <div class="dropdown" v-bind="attrs" v-on="on">User</div> </template> <v-list>...</v-list> </v-menu> 而不是search_sub_user：

   search_sub_users

这是您的代码的重构版本，位于codesandbox。