Vue indeterminate checkbox binding
binding, checkbox, vue.js
Solution
Indeterminate is a DOM property on a checkbox, which means putting it in the markup won't have an effect, it needs to be applied programmatically.
Even after doing that, keep in mind the state of a checkbox is still either checked or not checked. This is important to keep in mind when processing the form. The difference is visual only. (source)
With those caveats in mind, in Vue 2 you can add an indeterminate property to a checkbox like so:
`<input type="checkbox" indeterminate.prop="true">`
or bind to a dynamic value in your component:
`<input type="checkbox" :indeterminate.prop="dataProperty">`
I would recommend refactoring with this in mind.
Problem
I am using vue for data binding. I want to create a widget for access level control so I need allow, deny, and indeterminate states. This markup is good but there is no indeterminate state: ``` <div class="row" v-for='a in context.This.Actions'> <div class="col-96"> <input class="custom-control-input access-checkbox" v-bind:id="'chk_'+a.Name" v-bind:value="a.Id" v-model="context.This.RoleActions" indeterminate="true" type="checkbox" /> <label class="pointer" v-bind:for="'chk_'+a.Name">{{ a.Name }}</label> </div> </div> ``` The variables are : ``` context.This.Actions = [ { "Id": "id_1", "Name": "AAA" }, { "Id": "id_2", "Name": "BBB" }, { "Id": "id_3", "Name": "CCC" } ] context.This.RoleActions = [ "id_1", "id_2" ] ``` I want this change: ``` context.This.RoleActions = [ {"id_1":true}, {"id_2":false} ] ``` and I expect the below result: The first checkbox: checked The second checkbox: unchecked The other one: indeterminate