在选择选项中使用 @click - Vue.js 2 [英] Using @click in select options - Vue.js 2
本文介绍了在选择选项中使用 @click - Vue.js 2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在选择选项中使用@click.
I'd like to use @click in select options.
到目前为止我有:
<button @click="sortBy('name')">sort by name</button>
<button @click="sortBy('price')">sort by price</button>
它可以工作，但是当我将它插入选项标签时，它停止工作.
and it works, however when I insert it into option tag, it stopped working.
<select name="sortBy" id="sortBy">
<option value="sort">sort By</option>
<option @click="sortBy('name')">name</option>
<option @click="sortBy('price')">price</option>
</select>
我的功能:
sortBy(sortKey) {
this.items.sort((a, b) =>
(typeof a[sortKey] === 'string' || typeof b[sortKey] === 'string') ?
a[sortKey].localeCompare(b[sortKey]) : a[sortKey] - b[sortKey]);
}
推荐答案
不能绑定事件到，需要使用change 的事件，一旦你点击了一个选项，就会调用select的change事件回调:
You can't bind event to <option>, and you need to use the change event of the <select>, once you click a option, the change event callback of select will be invoked:
<select name="sortBy" id="sortBy" @change="sortBy(sortType)" v-model="sortType">
<option v-for="item in sortOptions" :value="item.value">{{item.text}}</option>
</select>
new Vue({
el: '...',
data: {
sortType: 'sort',
sortOptions: [
{ text: 'sort by', value: 'sort' },
{ text: 'name', value: 'name' },
{ text: 'price', value: 'price' }
]
}
})
一旦你改变了一个选项，sortTyoe 的值就会变成它，@change 会调用回调sortBy(sortType).
Once you change a option the value of sortTyoe will be changed to it, and the @change will call the callback sortBy(sortType).
这篇关于在选择选项中使用 @click - Vue.js 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
