v-model value of styled checkbox doesn't update

[yateric]

Vue.js version

2.1.9+

Reproduction Link

https://jsfiddle.net/1nqypbnt/

Steps to reproduce

Check the semantic checkbox.

What is Expected?

Value should become true.

What is actually happening?

Still be false.

Semantic checkbox is working on Vue 2.1.8 but is broken on 2.1.9+

[znck]

Events on the styled checkbox are captured by the Semantic script. I've modified your fiddle to add a click event counter.

IMO you should file bug in the Semantic repo.

[yyx990803]

2.1.8+ is using click events instead of change events on checkboxes to trigger updates. However based on what @znck has showed, I'd consider this a bug in Semantic UI. Styling the checkbox should not affect click events on the element.

[yateric]

For those who encounter this issue, I just found the solution by using pure CSS version of semantic UI checkbox.

1. Remove the checkbox call, e.g. $('.ui.checkbox').checkbox();
2. Remove the "hidden" class in <input type="checkbox"> or the checkbox will become unclickable.
3. Add a label tag inside <div class="ui checkbox"> even the label has no content or the styled checkbox will not be shown.

Checkout the fiddle

Thanks @znck @yyx990803 !

[vinayakkulkarni]

Is there a way to use it with checkbox call? cause I have $('.ui.checkbox').checkbox(); in my global calls which is used in php blade views.

[lwblackledge]

@vinayakkulkarni I just ran into this and decided to add a 'vue' class to checkboxes that should not be handled by Semantic.
Your global call becomes $('.ui.checkbox').not('.vue').checkbox();. Remember to add for="checkboxId" to your labels so the label click events pass through correctly.

[thomthom]

@yateric thank you very much for posting the non-javascript version. It really simplified my Vue application. Semantic-UI's need for JS to activate styling doesn't work that smoothly with Vue templates and conditional rendering. I had to watch a property and call Semantic UIs JS calls to ensure these widgets were working.