選択オプションで@clickを使用する - Vue.js 2

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> 

My機能：

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>にイベントをバインドすることはできません、とあなたがオプションをクリックすると、selectの変更イベントのコールバックを<select>のchangeイベントを使用する必要があります呼び出されます：あなたはsortTyoeの値がそれに変更されますオプション、および@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' } 
     ] 
    } 
}) 

コールバックsortBy(sortType)を呼び出します。