sorting - Is it possible to sort Vuetify multiple selection on change?

Question

I have a multiple selection Vue component that feeds items to display in an input box. As of now, it adds items based on the order of selection, but I wanted to template it to sort by sort_order after selection (objective_id, category_id, objective_code, objective_description, disabled_flag, sort_order are all passed into objectiveArray object). Is this possible to do in Vuetify?

<v-flex xs12>
    <v-tooltip :disabled="!showTooltip" top>
      <v-select
        slot="activator"
        class="objective-select"
        v-model="record.objectives"
        :items="objectiveArray"
        label="Objective(s)"
        placeholder="Enter Objective(s)"
        :error-messages="objectiveErrors"
        :return-object="true"
        item-text="objectiveDescription"
        multiple
        @blur="v.$each[index].objectives.$touch()">
        <template v-slot:selection="{ item, index }">
          <v-chip
            color="primary"
            dark
            class="objective-chip"
            :class="{
              mobile:isMobile,
              tablet:isTablet
            }">
            <span>{{ item.objectiveDescription }}</span>
          </v-chip>
        </template>
      </v-select>
      <span>Select one or more procedure objective(s)</span>
    </v-tooltip>
  </v-flex>

标签： sortingvuetify.js

Answer 1

您可以在事件触发v-model后对绑定进行排序。@input这是一个简单的例子：

<template>
  <div>
    <v-select
      v-model="selected"
      :items="items"
      item-text="id"
      item-value="id"
      multiple
      @input="sortSelection"
      return-object
    >
    </v-select>
  </div>
</template>

<script>
export default {
  data: () => ({
    selected: [],
    items: [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6}]
  }),
  methods: {
    sortSelection() {
      this.selected.sort((x, y) => {
        if (x.id > y.id) return 1
        else if (y.id > x.id) return -1
        else return 0
      })
    }
  }
}
</script>

只要您sort_order是一个数字，您就可以将其替换为id我示例中的字段。