Bagaimana untuk menetapkan atribut berbilang subitem v-treeview

Question

Andaikan saya mempunyai item pembolehubah dengan struktur berikut:

[
  {
    id: 1,
    nama: 'nilai1',
    item_nested: [
      {
        id: 2,
        nama: 'nilai2',
      },
      {
        id: 3,
        nama: 'nilai3',
        nested_item: [
          {
            ID: 4,
            nama: 'nilai4'
          }
        ]
      }
    ]
  }
]

Dalam v-treeview kami mempunyai prop yang dipanggil item-children yang menerima rentetan yang membenarkan untuk menetapkan sifat mana yang akan dirujuk sebagai kanak-kanak. Di peringkat pertama saya mahu mempunyai atribut item_nested sebagai kanak-kanak dan dalam tahap kedua saya mahu mempunyai nested_item Berbilang nilai untuk kanak-kanak item?

Answer 1

VTreeView使用一个string sebagai kunci kanak-kanak, jadi - tanpa melanjutkan/menimpa komponen asal - saya tidak nampak cara untuk menyediakan kunci alternatif untuk kanak-kanak itu.

Walau bagaimanapun, anda sentiasa boleh "menaip semula" objek yang anda mahu dipaparkan dalam VTreeview (coretan kod ini hanya digunakan untuk kes khusus ini, tetapi boleh digeneralisasikan kepada kes lain):

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  computed: {
    // "re-keying" items:
    modifiedTreeviewItems() {
      const updateItemKeys = (items) => {
        if (!items.length) return []

        const mapped = items.map((item) => {
          const {
            item_nested = [], nested_item = [], ...rest
          } = item
          const children = item_nested.length ? item_nested : nested_item.length ? nested_item : []
          return {
            ...rest,
            children: updateItemKeys(children),
          }
        })
        return mapped
      }
      return updateItemKeys(this.treeviewItems)
    },
  },
  data() {
    return {
      treeviewItems: [{
        id: 1,
        name: 'value1',
        item_nested: [{
            id: 2,
            name: 'value2',
          },
          {
            id: 3,
            name: 'value3',
            nested_item: [{
              id: 4,
              name: 'value4'
            }]
          }
        ]
      }]
    }
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-treeview :items="modifiedTreeviewItems" />
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>