Question

我想在选择选项中使用@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]);
}

Answer 1

您无法将事件绑定到<option>，并且您需要使用change的{{1}}事件，一旦您单击某个选项，就会发生{事件的更改事件回调{1}}将被调用：

<select>

更改选项后，select的值将更改为该值，@ change将调用回调<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' } ] } })。

在选择选项中使用@click - Vue.js 2

1 个答案: