Блог

Главная - Вопросы по программированию - получить массив значений в массиве vue для меню и подменю js

получить массив значений в массиве vue для меню и подменю js

#vue.js #vuetify.js

Вопрос:

Я хочу получить данные в массиве в списке массивов. Дело в том, что я хочу создать динамическое меню с родительским меню и подменю. У меня возникли проблемы после получения родительского меню, но я не смог получить подменю. вот данные, с которыми я имею дело

Эти данные о строительстве

и эта консоль данных:

эта консоль данных для подменю get

и этот пример меню дизайна и подменю

введите описание изображения здесь

и этот код для родительского меню get и подменю

  <v-list
      expand
      shaped
      class="vertical-nav-menu-items pr-5"
    >

      <nav-menu-group
        v-for="(item, i) in newList"
        :key="i"
        :title="item.name"
        :icon="icons.mdiHomeOutline"
      >
      <nav-menu-link
        v-for="(item, i) in newList"
        :key="i"
        :title="item.name"
        :icon="icons.mdiHomeOutline"
      />
       </nav-menu-group>
    </v-list>

Ответ №1:

Попробуйте, как в следующем фрагменте:

 new Vue({
  el: '#demo',
  vuetify: new Vuetify(),
  data() {
    return {
      newList: [
        {id: 1, name: 'Beranda', parentNavId: null},
        {id: 2, name: 'Admin', parentNavId: null, subMenu: [{id: 1, name: 'Menage Users', parentNavId: 2},{id: 2, name: 'Menage Members', parentNavId: 2}]}
      ]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false 
 <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<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>
<div id="demo">
  <v-list
      expand
      shaped
      class="vertical-nav-menu-items pr-5"
    >
  <v-list-group
    v-for="(item, i) in newList"
    :key="i"
    no-action
  >
    <template v-slot:activator>
        <v-list-item-content>
          <v-list-item-title v-text="item.name"></v-list-item-title>
        </v-list-item-content>
      </template>
      <v-list-item
        v-for="(it, i) in item.subMenu"
        :key="i"
      >
        <v-list-item-content>
          <v-list-item-title v-text="it.name"></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list-group>
  </v-list>
</div>
Метки: