VSelect должен позволять отображать выбранные элементы в порядке на: элементы - PullRequest
Новая
       12

VSelect должен позволять отображать выбранные элементы в порядке на: элементы

0 голосов
/ 19 марта 2020

VSelect сохраняет порядок, в котором пользователи выбирают значения (для v-модели), но они нужны нам всегда в порядке на :items

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-container fluid>
        <v-row
          align="center"
        >
          <v-col cols="12" sm="6">
            <v-select
              v-model="value"
              :items="items"
              chips
              label="Chips"
              multiple
              hide-selected
              menu-props="auto"
            ></v-select>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>
</div>

Мне нужно, чтобы value должен был сохранить порядок из items

, если мы выберем three, one и four в любом порядке, значение должно быть ['one','three','four']; 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['one', 'two', 'three', 'four'],
    value: [],
  }),
})

см. текущее поведение здесь . Мне нужно старое поведение, До реализации этой функции.

1 Ответ

1 голос
/ 19 марта 2020

Вы можете изменить порядок списка, отфильтровав массив исходных элементов: 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['foo', 'bar', 'fizz', 'buzz'],
    value : []
  }),
  computed : {
    _value : {
      get () {
        return this.value
      },
      set (val) {
        this.value = this.items.filter(x=>val.includes(x))
      }
    }
  }
})

и обновив v-модель до вычисленной _value

<v-select v-model="_value"/>

https://codepen.io/ellisdod/pen/ZEGjWPW

Или используя шаблонное решение: 

<v-select
 v-model="value"
 :items="items"  
 @change="value=items.filter(x=>value.includes(x))"
 attach
 chips
 label="Chips"
 multiple
 ></v-select>
...