Using @click In Select Options - Vue.js 2
I'd like to use @click in select options. So far I have:
Solution 1:
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">
<optionv-for="item in sortOptions":value="item.value">{{item.text}}</option>
</select>
newVue({
el: '...',
data: {
sortType: 'sort',
sortOptions: [
{ text: 'sort by', value: 'sort' },
{ text: 'name', value: 'name' },
{ text: 'price', value: 'price' }
]
}
})
Once you change a option the value of sortTyoe
will be changed to it, and the @change will call the callback sortBy(sortType)
.
Post a Comment for "Using @click In Select Options - Vue.js 2"