Проблема при попытке добавить всплывающее меню с многоуровневым подменю в Vuejs?

data: {
    menuItems: [{
        name: 'Item 1',
        children: [{
          name: 'Subitem 1'
        }, {
          name: 'Subitem 2'
        }, {
          name: 'Subitem 3'
        }]
      },
      {
        name: 'Item 2'
      }
    ],
    selectedDropdown: 'None'
  },
  methods: {
    setSelectedItem(item) {
      this.selectedDropdown = item;
    }
  },
  ready: function() {
    $('.dropdown-submenu a.test').on("click", function(e) {
      $(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  }
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
<ul>
  <li :class="{ current : item === value }" v-for="item in list" @click="select(item)">{{ item }}</li>
</ul>


<ul class="dropdown-menu" v-if="item.children">
  <li v-for="child in item.children"><a tabindex="-1" href="#" @click="setSelectedItem(child.name)">{{child.name}}</a></li>

Ссылка на CodePen https://codepen.io/santoshch/pen/mdWwepg

Пытался добавить подменю в раскрывающийся список, но не смог этого сделать, я имею в виду многоуровневый раскрывающийся список. Взял еще один тег ul и li для отображения элементов, но не знаю, как действовать.

В данных я уже передал элементы и значение, но для многоуровневого суб-уровня мне нужно добавить несколько элементов.

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


javascript html vue.js css
person taneeru dhanunjay    schedule 25.05.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете расширить свой список массивов (из примера кода) с помощью объектов:

list: [
  'Orange',
  'Apple',
  'Kiwi',
  'Lemon',
  'Pineapple',
  {
    name: 'Others',
    children: [
      'Strawberries',
      'Raspberries',
      'Blueberries'
    ]
  },
  'Last Fruit'
]

И когда вы перебираете список, вы проверяете эти объекты и выводите их во вложенном элементе <ul>:

<ul>
  <template v-for="(item, index) in list">
    <li v-if="item.name" :key="index" :class="{ current : item === value }">
      {{ item.name }}
      <ul>
        <li v-for="(childItem, childIndex) in item.children" :class="{ current : childItem === value }" :key="childIndex" @click="select(childItem)">
          {{ childItem }}
        </li>
      </ul>
    </li>
    <li v-else :key="index" :class="{ current : item === value }" @click="select(item)">{{ item }}</li>
  </template>
</ul>

Вот рабочий пример (без стилизации подменю)
https://jsbin.com/caroguwori/edit?html,js,output

person Reinhard Schnetzinger    schedule 27.05.2021