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?

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?

• javascript
• laravel
• google-chrome
• vuejs2

Share Improve this question Follow edited Jul 4, 2018 at 20:14 Derek Pollard 7,17566 gold badges4343 silver badges6060 bronze badges asked Jul 4, 2018 at 19:04 blank94blank94 39455 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.