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

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)
      }
    }