pug mixin 没有 return 预期的内容

Question

我是哈巴狗新手，有一个问题。我们在 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>

我无法打开子菜单。

截图：

我不确定我做错了什么。如何解决这个问题？

Answer 1

您需要告诉 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 Blocks。

pug mixin 没有 return 预期的内容

The pug mixin doesn't return the expected content

vue.js

pug

quasar-framework