VSelect 应该允许按 :items 按顺序显示选定的项目

Question

VSelect 保留用户 select 值的顺序（根据 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: [],
  }),
})

查看当前行为 here. I want the old behavior,Before this 功能实现。

Answer 1

您可以通过过滤原始项目数组来重新排序列表：

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>

VSelect 应该允许按 :items 按顺序显示选定的项目

VSelect should allow displaying selected items in order per :items

vue.js

vuetify.js

v-select