如何在 VueJS 中创建 @click on select 菜单

How to create @click on select menu in VueJS

我想在默认为空的 select 菜单中创建 @click。我尝试在 selectoption 甚至 div 中创建它,但它似乎不起作用。

所以,我的 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>

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

methods中的这个:

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

感谢您的回答

<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
  }
}