How to create @click on select menu in VueJS

Question

I wanna create @click in my select menu which is empty by default. I tried to create it in select, option and even div, but it doesn't to seem work.

So, I have this code in my template:

<div style="float: right; padding-right: 13px">
        <span>
          Sort by:
        </span>
        <select v-model="sort">
          <option
            v-for="item in items"
            :key="item.id"
            :value="item"
            @click="sortBy"
            v-text="item.title"
          ></option>
        </select>
      </div>

This in data:

items: [
    {
      id: 1,
      title: 'Price: Low to High',
      sort: 1
    },
    {
      id: 2,
      title: 'Price: High to Low',
      sort: 2
    },
    {
      id: 3,
      title: 'Newest first',
      sort: 3
    },
    {
      id: 4,
      title: 'Oldest first',
      sort: 4
    }
  ],
  sort: null

And this in methods:

sortBy() {
  console.log(this.sort) // console.log for tests
},

Thanks for answers

<select v-model="sort" @change="sortBy">, or watch:{sort(){this.sortBy()}} — Lawrence Cherone
– Lawrence Cherone, Commented Jun 30, 2021 at 20:17

Jujubes · Accepted Answer · 2021-06-30 22:00:28Z

<div style="float: right; padding-right: 13px">
  <span>
    Sort by:
  </span>
  <select v-model="sort">
    <option
      v-for="item in sortedList" //Notice the computed var
      :key="item.id"
      :value="item"
      @click="sortBy"
      v-text="item.title"
    ></option>
  </select>
</div>

computed:{
  sortedList(){
    if(this.sort){
      //FILTER YOUR LIST
    }

    //by default return original list
    return this.items
  }
},
data(){
  return {
    items: [
      {
        id: 1,
        title: 'Price: Low to High',
        sort: 1
      },
      {
        id: 2,
        title: 'Price: High to Low',
        sort: 2
      },
      {
        id: 3,
        title: 'Newest first',
        sort: 3
      },
      {
        id: 4,
        title: 'Oldest first',
        sort: 4
      }
    ],
    sort: null
  }
},
methods:{
  sortBy(){
    this.sort = !this.sort
  }
}

Collectives™ on Stack Overflow

How to create @click on select menu in VueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related