MDBSelect - Sort options

xxxxxxxxxx
 
<template>
  <div style="margin:40px">
    
​
    <MDBSelect
        v-model:options="options"
        @change="change"
        label="Testselect"
        :multiple="true"
        :selectAll="false"
        :filter="true"
    />
  </div>
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
</style>

xxxxxxxxxx
 
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
​
export default {
  name: "TestSelect",
  components: { MDBSelect },
  data() {
    return {
      options: [
        {value: 1, text: 'About'},
        {value: 2, text: 'Busy'},
        {value: 3, text: 'China'},
        {value: 4, text: 'Discount'},
        {value: 5, text: 'Eggs'},
      ]
    }
  },
  methods: {
    change() {
      this.options.sort(function compareFn(a, b) {
        // Selected at the beginning
        if (a.selected !== b.selected) {
          return (a.selected) ? -1 : 1;
        }
        // disabled at the end
        if (a.disabled !== b.disabled) {
          return (a.disabled) ? 1 : -1;
        }
        // default alphabetical
        if (a.disabled === b.disabled) {
          return a.text.localeCompare(b.text);
        }
      })
    },
  },
}
</script>

Console errors: 0