Как вставить разделитель в выпадающий список b после заполнения раскрывающегося списка с помощью Vue?

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