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

Question

VSelect 保留用户选择值的顺序（根据 v-model），但我们需要它们始终按照 :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。我想要旧的行为，在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-model 更新为计算出的_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>