VSelect should allow displaying selected items in order per :items

Question

VSelect preserves the order in which users select values (per the v-model), But we need them always in order per :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>

I need the value should keep the order of items

if we choose three,one, and four in any order, the value must be ['one','three','four'];

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

see current behavior here. I want the old behavior,Before this feature implementation.

Answer 1

You can reorder the list by filtering the original items array:

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

and update the v-model to the computed _value

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

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

Or using your template solution:

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