Menu v-for on div gives error

[urko-b]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.0.0-beta.15

Environment

Linux, firefox 82, vue 2.5.17

Reproduction link

Steps to reproduce

A component with when I try to loop over an array with v-for directive in a div then I use v-if to check if it has children in order to display sub-menu or menu-item

What is expected?

Not to throw error and let me display submenu or menuitem using an v-for

What is actually happening?

An error is thrown

[chsword]

1. use , because the key should be on both sub-menu and menu-item
2. add data variable: collapsed, section

<template>
  <div style="margin: 24px">
    <a-menu
      :default-selected-keys="[section]"
      mode="inline"
      :inline-collapsed="collapsed"
      @select="changeSection"
    >
      <template v-for="item in menu">
        <a-sub-menu v-if="item.children" :key="`menuitem-${item.key}`">
          <span slot="title">
            <a-icon :type="item.icon" />
            <span class="font-comfortaa uppercase">{{ item.text }}</span>
          </span>
          <a-menu-item
            v-for="child in item.children"
            :key="`submenu-${child.key}`"
          >
            <a-icon v-if="item.icon" :type="item.icon" />
            <span class="font-comfortaa uppercase">{{ child.text }}</span>
          </a-menu-item>
        </a-sub-menu>

        <a-menu-item v-else :key="`menuitem-${item.key}`">
          <a-icon :type="item.icon" />
          <span class="font-comfortaa uppercase">{{ item.text }}</span>
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>
 
<script>
import moment from "moment";
import { version } from "ant-design-vue";
export default {
  name: "App",
  data() {
    return {
      moment,
      version,
      collapsed: false, // 
      section: "", //
      menu: [
        { key: "dashboard", text: "Dashboard", icon: "dashboard" },
        { key: "cuentas", text: "Cuentas", icon: "bars" },
        { key: "cuentas", text: "Pagos", icon: "swap-right" },
        {
          key: "charges",
          text: "Cobros",
          icon: "swap-left",
          children: [
            {
              key: "charges",
              text: "•  TPVS",
            },
            {
              key: "charges",
              text: "•  ADEUDOS",
            },
          ],
        },
      ],
    };
  },
  methods: {
    changeSection(e) {
      console.log(e);
    },
  },
};
</script>

<style></style>

[urko-b]

@chsword Thanks, this example really solved my issue.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.