[Vuejs]-How to make the dropdown options alphabetical using html, vue, js

by

1👍

As pointed out before, the ideal case would be to retrieve your array sorted from the backend, usually this is more efficient.

In case you still want to do it from the front end after you retrieve you array apply a sort, in the example below I am doing it at the mounted stage, but tailor this to your actual needs

var app = new Vue({
  el: '#app',
  data: {
    myOptionsArray: ['W','E','R','A','D', 'B']
  },
  mounted() {
    this.myOptionsArray = this.myOptionsArray.sort();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <select name="mySelect">
      <option v-for="(item , index) in myOptionsArray" v-bind:key="index">
        {{item}}
      </option>
    </select>
  </div>

-1👍

The most efficient way would be ordering them in the backend during the query. totally depends on your usecase. Elseway you should sort it in the frontend by using the

key = "Key you want to sort on"
<List of database>.sort((a,b)=>a[key] - b[key])

Leave a comment