vue.js - 哈巴狗混合不返回预期的内容
问题描述
我是哈巴狗的新手,有一个问题。我们在 Vue.js 应用程序中使用 pug,我想生成多级菜单(带有子菜单)。我们使用如下所示的数据:
mounted () {
this.catalog = [
{
title: "Компрессоры",
permalink: "kompressory",
hasChildren: true,
cover: "kk",
subcatalog: [
{
title: "A1",
permalink: "a1",
hasChildren: false,
cover: "aa1",
},
{
title: "B1",
permalink: "b1",
hasChildren: false,
cover: "bb1",
}
]
},
{
title: "Ручной инструмент",
permalink: "ruchnoy-instrument",
hasChildren: true,
cover: "rr",
subcatalog: [
{
title: "C1",
permalink: "c1",
hasChildren: false,
cover: "cc1",
},
{
title: "D1",
permalink: "d1",
hasChildren: false,
cover: "dd1",
},
{
title: "E1",
permalink: "e1",
hasChildren: false,
cover: "ee1",
}
]
},
{
title: "Пневмоинструмент",
permalink: "pnevmoinstrument",
hasChildren: false,
cover: "pp",
},
{
title: "Специальный инструмент",
permalink: "spetsialnyy-instrument",
hasChildren: false,
cover: "ss",
},
{
title: "Оборудование для СТО",
permalink: "garazhnoe-oborudovanie",
hasChildren: false,
cover: "oo",
},
]
}
它应该是垂直菜单,顶部有一个按钮。单击按钮时,带有子菜单的菜单会下拉。作为菜单组件,我们使用 Quasar 的 QMenu。
工作模板代码如下所示:
<template lang="pug">
.q-pa-md
.q-gutter-md.row.items-center
q-btn(color='primary', label='Click me')
q-menu(v-model='showing')
q-list(dense='dense', style='min-width: 100px')
q-item(v-for='category in catalog', :key='category.permalink', href='#', clickable='clickable', v-close-popup='v-close-popup')
q-item-section {{ category.title }}
q-item-section(side='side')
q-icon(name='keyboard_arrow_right', v-if='category.hasChildren')
q-menu(anchor='top end', self='top start')
q-list
q-item(v-for='n in 3', :key='n', dense='dense', clickable='clickable')
q-item-section Submenu Label
q-item-section(side='side')
q-icon(name='keyboard_arrow_right')
q-menu(auto-close='auto-close', anchor='top end', self='top start')
q-list
q-item(v-for='n in 3', :key='n', dense='dense', clickable='clickable')
q-item-section 3rd level Label
q-separator
q-item(clickable='clickable', v-close-popup='v-close-popup')
q-item-section Quit
</template>
截图:
但是,我编写了如下所示的 createMenu.pug mixin:
mixin createMenu(catalog)
q-list(dense style='min-width: 100px')
q-item(v-for='category in catalog', :key='category.permalink', href='#', clickable='clickable', v-close-popup='v-close-popup')
q-item-section {{ category.title }}
q-item-section(side='side')
q-icon(name='keyboard_arrow_right', v-if='category.hasChildren')
如您所见,我刚刚将部分代码从主模板移动到了 mixin,仅此而已。
但是,当我尝试以这种方式在主模板中使用该 mixin 时:
<template lang="pug">
include ./pug_mixins/createMenu.pug
.q-pa-md
.q-gutter-md.row.items-center
q-btn(color='primary', label='Click me')
q-menu(v-model='showing')
+createMenu(catalog)
q-menu(anchor='top end', self='top start')
q-list
q-item(v-for='n in 3', :key='n', dense='dense', clickable='clickable')
q-item-section Submenu Label
q-item-section(side='side')
q-icon(name='keyboard_arrow_right')
q-menu(auto-close='auto-close', anchor='top end', self='top start')
q-list
q-item(v-for='n in 3', :key='n', dense='dense', clickable='clickable')
q-item-section 3rd level Label
q-separator
q-item(clickable='clickable', v-close-popup='v-close-popup')
q-item-section Quit
</template>
我无法打开子菜单。
截图:
我不确定我做错了什么。如何解决这个问题?
解决方案
您需要告诉 mixin 声明在哪里呈现传递给它的块内容。您可以通过添加block
到 mixin 声明的适当部分来做到这一点。在您的情况下,需要将声明修改为:
mixin createMenu(catalog)
q-list(dense style='min-width: 100px')
q-item(v-for='category in catalog', :key='category.permalink', href='#', clickable='clickable', v-close-popup='v-close-popup')
q-item-section {{ category.title }}
q-item-section(side='side')
q-icon(name='keyboard_arrow_right', v-if='category.hasChildren')
if block
block
有关详细信息,请参阅Pug 文档中的Mixin 块。
推荐阅读
- mapbox - Mapbox 标记样式/CSS 在 Angular 8 应用程序中不起作用
- javascript - 如何从文件输入中反序列化 JSON 字符串
- flutter - 如何自动更新文本而不是 Flutter 中的按钮?
- java - 如何检测砖断路器java中的碰撞
- jasper-reports - JasperReports 列表正在改变框架高度
- jhipster - 将 jhipster 5.8 升级到 6.9.1 版本的最佳方法是什么?
- amazon-web-services - AWS VPC 中的实例无法通过 VPN 访问互联网
- performance - Xamarin Forms:调用 ASP.NET (ASMX) Web 服务时性能非常慢
- javascript - 在反应功能组件上测试酶中的点击事件未通过
- javascript - 为什么我的比较没有产生预期的结果?