Question

在灵感源自Sarah Drasner的Smashing Magazine文章Replacing jQuery with Vue中，我在Wordpress主题中将所有jQuery替换为Vue。事情进展顺利，因为我已经替换了模态，表单验证/提交等功能。甚至通过Google的页面速度洞察工具提高了页面速度等级。

我的最后一个难题是结束导航菜单。菜单已构建并且可以运行，但是我对此不满意。我的主要不满是有条件地使子菜单更好。例如，没有孩子的菜单项会收到一个空孩子：

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

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

以下是我的Nav菜单数据的形状：https://api.myjson.com/bins/jfld4

重要的属性定义：

“ obeject_id”是唯一的标识符
“ post_parent”是指导航项的父项“ object_id”
通知顶级菜单项具有“ post_parent：0”

这是我用于渲染菜单的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>

Answer 1

在您的<ul class="sub-menu">元素上，将v-if或v-show包含在测试中，以检查该项目是否包含任何子项目（例如，一旦计算出<ul class="sub-menu" v-show="hasSubItems">当然）。检出conditional rendering in the Vue docs。

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

1 个答案: