Setting a checkbox as checked with Vue js

Question

I have been googling and playing with every combination I know but I cannot get my checkboxes to be initialised as checked   Example    lt ul class  object administrator-checkbox-list  gt       lt li v-for  module in modules  gt           lt label v-bind for  module id  gt               lt input type  checkbox  v-model  form modules  v-bind value  module id  v-bind id  module id  gt               lt span gt     module name    lt  span gt           lt  label gt       lt  li gt   lt  ul gt    An example of the modules data                    id   1           name    Business            checked   true                       id   2           name    Business 2            checked   false            What can I do to initially set the checked status of the checkboxes

User · Accepted Answer

To set the value of the checkbox  you need to bind the v-model to a value  The checkbox will be checked if the value is truthy  In this case  you are iterating over modules and each module has a checked property  The following code will bind the checkbox with that property   lt input type  quot checkbox quot  v-model  quot module checked quot  v-bind id  quot module id quot  gt    Notice that I removed v-bind value  quot module id quot   You shouldn t use v-model and v-bind value on the same element  From the vue docs    lt input v-model  quot something quot  gt   is just syntactic sugar for   lt input v-bind value  quot something quot  v-on input  quot something    event target value quot  gt    So  by using v-model and v-bind value  you actually end up having v-bind value twice  which could lead to undefined behavior

User · Answer

I use both hidden and checkbox type input to ensure either 0 or 1 submitted to the form  Make sure the field name are the same so only one input will be sent to the server   lt input type  quot hidden quot   name  quot fieldName quot  value  quot 0 quot  gt   lt input type  quot checkbox quot   name  quot fieldName quot  value  quot 1 quot   checked  quot checked quot  gt

User · Answer

I had similar requirements but I didn t want to use v-model to have the state in the parent component  Then I got this to work    lt input   type  checkbox     checked  checked     input  checked    event target checked    gt    To pass down the value from the parent  I made a small change on this and it works    lt input   type  checkbox     checked  aPropFrom     input   emit  update aPropFrom    event target checked     gt

User · Answer

I experienced this issue and couldn t figure out a fix for a few hours  until I realised I had incorrectly prevented native events from occurring with   lt input type  quot checkbox quot   click prevent  quot toggleConfirmedStatus render uuid  quot       checked  quot confirmed indexOf render uuid   gt  -1 quot       value  quot render uuid quot    gt   removing the  prevent from the  click handler fixed my issue

User · Answer

Let s say you want to pass a prop to a child component and that prop is a boolean that will determine if the checkbox is checked or not  then you have to pass the boolean value to the v-bind checked  booleanValue  or the shorter way  checked  booleanValue   for example    lt input     id  checkbox      type  checkbox       value  checkboxVal       checked  booleanValue      v-on input  checkboxVal    event target value    gt    That should work and the checkbox will display the checkbox with it s current boolean state  if true checked  if not unchecked

User · Answer

In the v-model the value of the property might not be a strict boolean value and the checkbox might not  recognise  the value as checked unchecked  There is a neat feature in VueJS to make the conversion to true or false    lt input   type  checkbox    v-model  toggle    true-value  yes    false-value  no   gt

[javascript] Setting a checkbox as checked with Vue.js

Examples related to javascript

Examples related to vue.js