Vue JS - Change 2 buttons to a select drop down-CodePudding

I have 2 buttons which sorts my array a -z or relevance. They work well. I would like the options to be in a drop-down rather than 2 buttons. How can I achieve this?

This is what I have just now:

<button @click="sortalphabetically">Alphabetically <button @click="sortbyrelevance">Relevance

  methods: {
    sortalphabetically() {
      this.theResults = [...this.results].sort((a, b) =>
        a.title > b.title ? 1 : -1
      );
    },
    sortbyrelevance() {
      this.theResults = [...this.results];
    },}

I would like a select drop-down instead of the buttons.

 <select
            
            v-model="sortatoz"
            @change="sortIems"
            id="sortby"
            aria-label="sortby"
          >
            <option disabled value="" selected>Select</option>
            <option value="alphabetically">Alphabetically</option>
            <option value="relevance">Relevance</option>
          </select>

CodePudding user response：

You need to add a v-model directive to your select

You can then sort depending on the value of the v-model

new Vue({
  el: '#app',
  data: () => ({
    optionSelected: "asc"
  }),
  methods: {
    sort(){
      switch (this.optionSelected){
        case 'desc':
          console.log('here sort desc')
          break;
        case 'asc':
          console.log('here sort asc')
          break
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>

<div id="app">
  <select v-model="optionSelected" @change='sort'>
    <option value="asc">Sort asc</option>
    <option value="desc">sort desc</option>
  </select>
</div>