我想在选择选项中使用@click。
到目前为止我有:
<button @click="sortBy('name')">sort by name</button>
<button @click="sortBy('price')">sort by price</button>
它可以工作,但是当我将它插入选项标签时,它停止工作。
<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]);
}
您无法将事件绑定到<option>
,并且您需要使用change
事件的<select>
,一旦点击某个选项,change事件回调select
将被调用:
<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)
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)