Dynamic Menu with Submenu Vuejs and JSON

Question

guys here's what I'm trying to do.

I want to create a vertical menu with submenus on it. using this JSON code:

"response": {
        "data": [
            {
                "id": 1,
                "name": "AC Articles",
                "subname": {
                    "data": [
                        {
                            "id": 14,
                            "sub_category": "Window PC"
                        },
                        {
                            "id": 15,
                            "sub_category": "Mac PC"
                        }
                    ]
                }
            },
            {
                "id": 2,
                "name": "MyPage Articles",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 3,
                "name": "PC/Internet Optimization",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 4,
                "name": "Troubleshooting Guide",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 5,
                "name": "Others",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 6,
                "name": "Previous Announcements",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 7,
                "name": "Operational Update",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 8,
                "name": "LS Updates",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 9,
                "name": "Fees Articles",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 10,
                "name": "Teacher's Promotion Guide",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 11,
                "name": "Modified Mypage Unlocking Process",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 12,
                "name": "Training Specialization",
                "subname": {
                    "data": []
                }
            },
            {
                "id": 13,
                "name": "PHBee TESOL Common Concerns/Inquiries",
                "subname": {
                    "data": []
                }
            }
        ]
    }

so far here's what i have done

<ul class="nav flex-column">
            <li 
            v-for="list in categories"
            :key="list.id" 
            class="nav-item dropdown"
            >
              <a 
              v-if="list.subname"
              class="nav-link dropdown-toggle"
              data-toggle="dropdown"
              role="button" 
              aria-haspopup="true" 
              aria-expanded="false"
              >{{ list.name }}</a>
              <a 
              v-else
              class="nav-link"
              role="button" 
              >{{ list.name }}</a>
              <div v-for="sub in list.subname" :key="sub.id"  class="dropdown-menu">
                <a class="dropdown-item">{{ list.subname }}</a>
              </div>
            </li>
          </ul>

I also want to check if there's a submenu on each menu, if there's a submenu it will create a dropdown else no dropdown for that menu

hope you guys help me.

Thank you

Answer 1

you can try this in v-if condition

  v-if="list.subname.data.length > 0"