Chrome doesn't work for vuejs v-on:click in option tag

Question

I have something like the following code :

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

It works fine in firefox but doesn't work in chrome and safari. in other words @click doesn't work in chrome when it's in an option tag.

It's obvious that I'm using vuejs.

any idea?

Answer 1

Click event on option tag is not supposed to fire at all. Don't rely on it. Bind onchange event on select:

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

Then in setCategoryId take event.target.value , it will be your id.