Блог

Главная - Вопросы по программированию - Как мне перейти по строке в v-combobox — vuetify

Как мне перейти по строке в v-combobox — vuetify

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

Я использую v-combobox для просмотра списка v-chip , и он выглядит так:

введите описание изображения здесь

Я хочу добавить разрыв строки между каждым чипом.

Вот мой код:

 <v-combobox
  :append-icon="false"
  style="
    padding-right: 30px !important;
    padding-left: 30px !important;
  "
  :search-input.sync="search"
  v-model="chips"
  :items="items"
  chips
  clearable
  color="#0D47A1"
  label="Your actions..."
  multiple
  readonly="true" :key="chips.name">

  <template
    v-slot:selection="{ attrs, item, select, selectedSetups }"
    style="font-size: 14px; font-family: 'Segoe UI Emoji'">
    <v-chip
      class="list-group-item"
      v-bind="attrs"
      :input-value="selectedSetups"
      color
      label
      close
      @click="select"
      @click:close="RemoveRequirement(item)"
      outlined>
      <span>{{ item.category }}</span>amp;nbsp;
      <v-divider
        class="mx-4"
        color="black"
        inset
        vertical
        v-show="item.value.toString() != ''"></v-divider>
      <span>{{ item.value.toString() }}</span>
    </v-chip>
  </template>
</v-combobox>

Есть идеи о том, как этого добиться, пожалуйста?

Комментарии:

1. было бы здорово, если бы вы предоставили codesandbox, чтобы я мог помочь вам вместо того, чтобы создавать ваш пример самостоятельно. для вас это просто копипаст на данный момент.

2. что вы имеете в виду? куда вы хотите, чтобы я вставил свой код? Спасибо

3. codesandbox.io создайте пример, аналогичный вашему на скриншоте

Ответ №1:

Я нашел способ сделать это с помощью css, но это также сдвигает выпадающий список вниз при каждом выборе. Это, вероятно, нежелательно. Попробуйте и убедитесь сами:

 div[role=combobox] .v-select__slot .v-select__selections {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}