Chrome не работает для vuejs v-on: щелкните в теге option

Question

У меня есть что-то вроде следующего кода:

<select>
  <option v-for="category in step4.categoryList" v-on:click="setCategoryId(category.id)">
     @{{category.category_name }}
  </option>
</select>

Он отлично работает в Firefox, но не работает в Chrome и Safari. другими словами, @click не работает в chrome, когда он находится в теге option.

Очевидно, что я использую vuejs.

есть идеи?

Answer 1

Событие клика по тегу опции не должно запускаться вообще. Не надейся на это. Событие Bind onchange при выборе:

<select v-on:change="setCategoryId">
  <option
    v-for="category in step4.categoryList"
    :value="category.id">
    @{{category.category_name }}
  </option>
</select>

Тогда в setCategoryId возьмите event.target.value, это будет ваш идентификатор.