带有子菜单 Vuejs 和 JSON 的动态菜单

Question

伙计们，这就是我想要做的。

我想创建一个带有子菜单的垂直菜单。 使用此 JSON 代码：

"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": []
                }
            }
        ]
    }

到目前为止，这是我所做的

<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>

我还想检查每个菜单上是否有子菜单，如果有子菜单，它将创建一个下拉菜单，否则该菜单没有下拉菜单

希望大家帮帮我。

谢谢

Answer 1

你可以在 v-if 条件下试试这个

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