@click in select options - Vue.js 2

@click in select options - Vue.js 2

선택 옵션을 @클릭하고 싶다.

지금까지 나는 다음을 가지고 있다.

<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>, 옵션을 클릭하면 변경 이벤트 콜백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).

참조URL: https://stackoverflow.com/questions/46260052/using-click-in-select-options-vue-js-2