如何在VueJS中创建@click选择菜单

大佬教程收集整理的这篇文章主要介绍了如何在VueJS中创建@click选择菜单，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在VueJS中创建@click选择菜单？

我想在默认情况下为空的选择菜单中创建 @click。我尝试在 SELEct、option 甚至 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

这在 @H_711_3@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
  }
}

大佬总结

以上是大佬教程为你收集整理的如何在VueJS中创建@click选择菜单全部内容，希望文章能够帮你解决如何在VueJS中创建@click选择菜单所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。