尝试在 Vuejs 中添加带有多级子菜单的弹出菜单时出现问题？答案

【问题标题】：Issue when trying to add popup menu with multi level sub menu in Vuejs?尝试在 Vuejs 中添加带有多级子菜单的弹出菜单时出现问题？
【发布时间】：2021-05-25 13:52:42
【问题描述】：

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 标签来显示项目，但不知道如何进行。

在数据中我已经传递了项目和值，但是对于子多级我需要添加一些项目。

对于上面的codepen，尝试为子多级项目添加代码，然后我得到错误

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

您可以使用对象扩展您的数组列表（来自您的 codepen 示例）：

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

【讨论】：