javascript - 使用 Vue 填充下拉列表后，如何在 b 下拉列表中插入分隔符？

Question

为了简单起见，这里是我的下拉菜单代码:

<b-dropdown id="SchemaDropdown"
                      name="SchemaDropdown"
                      variant="form-control"
                      class="" 
                      style="width: 100%"
                      v-on:change="changeItem">
                      <span slot=text>{{schemaName}}</span>
                    <b-dropdown-item v-for="option in schemas.Formats" 
                                      :key="option.mappingId" 
                                      :value="option.mapping"
                                      @click="changeItem(option.mappingId)">
                      {{option.mapping}}
                    </b-dropdown-item>
                    <b-dropdown-divider></b-dropdown-divider>
                  </b-dropdown> 

我的模式对象基本上是可用模式及其相关 GUID 的字典。下拉列表工作正常并适本地选择模式。

现在在系统中，前两个模式是系统默认的，其余的都是用户可以预先配置的自定义。所以一个客户可能有 2 个自定义架构，另一个可能有 100 个。谁知道呢。

我想将我的 b-dropdown-divider 放在第二个模式之后，这样下拉列表看起来像:

Default Schema 1
Default Schema 2
----------------
User Configured 1
User Configured 2
etc...

如何在特定点插入？

Answer 1

您可以为此目的使用计算属性:

  <b-dropdown-item 
      v-for="option in defaultOptions" 
     :key="option.mappingId" 
     :value="option.mapping"
     @click="changeItem(option.mappingId)">
     {{option.mapping}}
    </b-dropdown-item>

    <b-dropdown-divider></b-dropdown-divider>

    <b-dropdown-item 
      v-for="option in customOptions" 
     :key="option.mappingId" 
     :value="option.mapping"
     @click="changeItem(option.mappingId)">
     {{option.mapping}}
    </b-dropdown-item>

在 javascript 代码中:

    computed: {
      defaultOptions: function () {
        return this.schemas.Formats.slice(0, 2)
      },
      customOptions: function () {
        return this.schemas.Formats.slice(2, this.schemas.Formats.length)
      }
    }