时间戳

首页 > 解决方案 > 通过 WP REST API 的 Vue.js 导航子菜单

vue.js - 通过 WP REST API 的 Vue.js 导航子菜单

问题描述

受 Sarah Drasner 的 Smashing Magazine 文章用 Vue 替换 jQuery的启发，我在我的 Wordpress 主题中用 Vue 替换了所有 jQuery。事情进展顺利，因为我已经替换了模态、表单验证/提交等功能。我什至通过谷歌的页面速度洞察工具提高了我的页面速度等级。

我的最后一块拼图是完成我的导航菜单。菜单已构建并且可以正常工作，但我对此并不满意。我的主要不满是有条件地渲染子菜单更好。例如，没有子项的菜单项会收到一个空子项：

<ul class="submenu"></ul>

这是我到目前为止所拥有的：

这是我的导航菜单数据的形状：https ://api.myjson.com/bins/jfld4

重要的属性定义：

这是我用于渲染菜单的 Vue 代码：" https://codepen.io/JosephAllen/pen/zLQqRr?editors=0011

<ul class="menu" id="primary-menu">
    <menu-item 
        v-for="item in navItems"
        v-if="item.post_parent == 0"
        :key="item.object_id"
        :class="{active: item.active}"
        v-bind:url="item.url"
        v-bind:object_id="item.object_id"
        v-bind:post_parent="item.post_parent"
        v-bind:title="item.title">
        <ul class="sub-menu">
            <menu-item 
                v-for="subItem in navItems"
                :key="subItem.object_id"
                v-if="subItem.post_parent == item.object_id"
                v-bind:object_id="subItem.object_id"
                v-bind:url="subItem.url"
                v-bind:ID="subItem.ID"
                v-bind:post_parent="subItem.post_parent"
                v-bind:title="subItem.title">
            </menu-item>
        </ul>
    </menu-item>
</ul>

标签： vue.jswordpress-rest-api

解决方案

在您的<ul class="sub-menu">元素上，包含v-if或v-show测试该项目是否包含任何子项目（例如<ul class="sub-menu" v-show="hasSubItems">，一旦您hasSubItems当然计算过）。查看Vue 文档中的条件渲染。

推荐阅读