Vue: Can Vue add support for checkbox's indeterminate state?

[smalllong]

Vue.js version

1.0.26

What is Expected?

The checkboxes binded with Vuejs can have THREE states: true, false, or indeterminate. For example, when binded with a checkbox and the value is "indeterminate", the checkbox's indeterminate property is set to true.

What is actually happening?

The checkboxes that binded with Vuejs only got two states: true or false.

[sirlancelot]

indeterminate doesn't have a DOM attribute equivalent. With that in mind, I don't think it's really Vue's concern. You could write your own directive to handle it quite easily though.

[sirlancelot]

I saw that you're requesting Vue 1.x so I made the one-line directive for you with an example:

http://codepen.io/sirlancelot/pen/BQBVvz

_(I also added an untested, commented out Vue 2.x version)_

[yyx990803]

The problem is what value in JS should be used to represent this visual state - it may totally depend on your use case and app logic. So it's probably better to handle it in your own code, as @sirlancelot suggested.

[simplesmiler]

@yyx990803 to be fair, checkboxes already support binding of true-value and false-value, maybe it worth adding indeterminate-value?

[simplesmiler]

According to WC3, indeterminate is not a distinct state as checked and unchecked are. Instead it "obscures" the actual state of the checkbox without changing it. Thus, it's more of a candidate for :indeterminate="true" rather than :checked="undefined". But there are few things to consider.

1. The :checked (and some other bindings) does not bind the checked attribute, because this attribute represents the default value, not the current value. But there's no "default value attribute" for indeterminate, so it would be hijacking to bind it.
2. Because there's no "default value attribute" for indeterminate, DOM rehydration after SSR may be awkward.

@yyx990803 what's your final word on how should I proceed with this, core or userland?

[yyx990803]

@simplesmiler I still think this belongs more in userland. In fact in 2.0 you can simply do:

<input type="checkbox" :indeterminate.prop="true">

In v1, a simple custom directive would do.

[rhyek]

Any way to set something like :indeterminate.prop with v-bind? Something like:

<input type="checkbox" v-bind="someFunc(id)">

someFunc (id) {
  return {
    checked: true,
    'indeterminate.prop': true
  }
}

[totalamd]

@rhyek, you can use this way to one-way binding:

<input type="checkbox" v-bind.prop="state(id)">

state(id) {
  return {
    checked: true,
    indeterminate: true
  }
}

I couldn't find a way how to create proper getter of someFunc() to get "checked" value.

[hartwork]

I have implemented and published a fully functional Vue.js component for a cycling tristate checkbox now. It supports click-cycling through all three states, v-model binding, form submission of the indeterminate value, customization of all values, and more. All supported properties are documented. I'll be happy about constructive feedback and bug reports over at https://github.com/hartwork/vue-tristate-checkbox . :beers: Best, Sebastian