Vue를 사용하여 드롭다운을 채운 후 B 드롭다운에 구분선을 삽입하려면 어떻게 해야 합니까?

Vue를 사용하여 드롭다운을 채운 후 B 드롭다운에 구분선을 삽입하려면 어떻게 해야 합니까?

간단하게 하기 위해서, 드롭 다운용의 코드를 다음에 나타냅니다.

<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...

특정 지점에 를 삽입하려면 어떻게 해야 합니까?

계산된 속성은 다음과 같은 용도로 사용할 수 있습니다.

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

자바스크립트 코드:

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

언급URL : https://stackoverflow.com/questions/52180031/how-can-i-insert-a-divider-in-a-b-dropdown-after-populating-my-dropdown-using-vu