web-dev-qa-db-ja.com

またはネストされたリスト-Vuetify

3つ以上のレベルのネストを含むネストされたリストを作成しようとしています。 v-listの子アイテム内にアイテムの子オブジェクトを配置すると、何も表示されません。

Vuetifyでそのようなネストされたリストを作成することさえ可能ですか？そうでない場合、この問題の解決策は何でしょうか？

<div>
  <v-list v-for="(powerPlant, i) in powerPlants" :key="i">
    <v-list-group
      prepend-icon="fas fa-bolt"
      value=""
     >

      <v-list-tile slot="activator">
        <v-list-tile-title>{{powerPlant.name}}</v-list-tile-title>
      </v-list-tile>

      <v-list-group
        no-action
        sub-group
        value="true"
        v-for="(generator, i) in generators" :key="i"
      >
        <v-list-tile slot="activator">
          <v-list-tile-title>{{generator.name}}</v-list-tile-title>
        </v-list-tile>

        <v-list-tile
          v-for="(option, i) in options"
          :key="i"
        >
          <v-list-tile-title v-text="option[0]"></v-list-tile-title>
          <v-list-tile-action>
            <v-icon v-text="option[1]"></v-icon>
          </v-list-tile-action>
        </v-list-tile>
      </v-list-group>
    </v-list-group>
   </v-list>
  </div>

JQueryを使用せずにVue.jsを使用して大きなネストされたリストを作成する別の方法がある場合は、私が学びたいと思います。

説明がうまくいかず申し訳ありません。このようにして、投稿したリストは3レベルのリストに到達できますが、4レベルまたは5レベルのようにさらに進むことはできません。

javascripthtmlvue.jsvuetify.js
3
Marcos Moskorz

私はこのようにv-listをネストすることでこれを解決しました：

<v-list>
    <v-list-group v-for='node in nodes' v-model='node.active'>
        <v-list-tile slot='activator' @click=''>
            <v-list-tile-title>{{node.text}}</v-list-tile-title>
        </v-list-tile>
        <v-list class='py-0 pl-1'>
            <v-list-group v-for='child in node.children' v-model='child.active'>
                <v-list-tile slot='activator' @click=''>
                    <v-list-tile-title>{{child.text}}</v-list-tile-title>
                </v-list-tile>
                <v-list class='py-0 pl-2' v-for='grandchild in child.children'>
                    <v-list-tile>
                        <v-list-tile-title>{{grandchild.text}}</v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-list-group>
        </v-list>
    </v-list-group>
</v-list>

これは任意に深くなる可能性があります。実際、無限にネストするリストが必要だったので、次の単純な再帰コンポーネントを作成しました。

<template>
    <v-list>
        <template v-for='node in nodes'>
            <v-list-group v-if='node.children && node.children.length' v-model='node.active'>
                <v-list-tile @click='' slot='activator'>
                    <v-list-tile-title>{{node.text}}</v-list-tile-title>
                </v-list-tile>
                <node-list class='py-0 pl-3' :nodes='node.children'/>
            </v-list-group>
            <v-list-tile @click='' v-else>
                <v-list-tile-title>{{node.text}}</v-list-tile-title>
            </v-list-tile>
        </template>
    </v-list>
</template>

<script>
export default {
    name: 'node-list',
    props: ['nodes'],
}
</script>
6
Kris