[MdCheckbox] Checkbox boolean model with default value of null

[sambhav-gore]

I want the ability to specify the true-value and false-value as boolean when the initial (default) value for the model for checkbox is null

Steps to reproduce

<md-checkbox v-model="field">Approved?</md-checkbox>
{{field}}

Which browser?

Chrome

What is expected?

When the default value is 'null' after checking the checkbox it becomes 'on'
I want the ability to specify that when the checkbox is checked, the value in model should be 'true' and when further unchecked it should be false.
In other words I want the v-bind:true-value and v-bind:false-value to work correctly with md-checkbox

What is actually happening?

md-checkbox is dynamically setting the value in model by checking the type of binding.

Reproduction Link

[VdustR]

I didn't get it. I don't understand why won't you just use Boolean for boolean model?

[sambhav-gore]

@VdustR Correct, but as of now our API responds with value of null for boolean fields. but when sending it back we need to have a boolean. I know it is not ideal as of now.

[sambhav-gore]

@VdustR I created this codesandbox with default input to showcase what I am trying to achieve. https://codesandbox.io/s/mm2x5k7jv9

with md-checkbox I am unable to bind the true-value and false-value directives

edit - Same thing with md-checkbox here - https://codesandbox.io/s/8nlj6y6108

[VdustR]

I think computed is what you need.

[sambhav-gore]

Well not really, I want to be able to specify what value to set in the model when the checkbox is checked. See in my previous comment, I am able to do it when not using md-checkbox.

[VdustR]

Do you mean if the checkbox is checked post a value 'value' and if it's unchecked post 'false'?

[VdustR]

I got it now. Thanks.

[sambhav-gore]

If the checkbox is checked then model value is 'true' when unchecked the value is 'false'. However, initially the model value is null. Once again, this is exactly what I want - https://codesandbox.io/s/mm2x5k7jv9

[Samuell1]

Use it as
<md-checkbox v-model="toggle" value="true">Accept terms? </md-checkbox>
and toggle default data value make as false