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

Question

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: [],
  }),
})

在此处查看当前行为。我想要旧的行为，在此功能实现之前。

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>