Checkbox returns NULL when it should return FALSE

[mrpaulharris]

Expected Values: true, false

Checkboxes are typically expected to have values true, false:

• The vuetify-form-base documentation shows that checkbox values are true, false. See https://wotamann.gitbook.io/vuetify-form-base/ which shows the done check boxes with true, false values.
• (Also the Vuetify documentation indicates that checkboxes should be true, false. See https://vuetifyjs.com/en/components/checkboxes/#usage. Try clicking on the checkbox to see the values.)

Actual Values: true, null

However the vuetify-form-base examples show that check box values are true, null.

• See https://wotamann.github.io/wrapping (try clicking on the checkbox and see the model value change to null)

Why is this a problem?

This behaviour is causing a error when I try to pass checkbox values to an external api that I am using. It is complaining that null is not a valid boolean value.

Attempted workarounds

I tried adding fromCtrl and toCtrl. The lazyvalue is altered but model object deep value is still null.

                enabled: {
                  type: "checkbox",
                  label: "invoice history",
                  col: { cols: 6, sm: 4 },
                  fromCtrl:({value}) => {return (value ? true : false)},
                  toCtrl:({value}) => {return (value ? true : false)}
                },

I also tried an input listener, but I couldn't figure out how to change the value there either.

    change({  key, obj, value }){ 
      if (obj.schema.type === 'checkbox'){
        value = (value ? true : false)
        console.log(obj.schema.type + ' ' + key + ' ' + value) 
      }
    },

Successful workaround

The following workaround will directly update the model object (config) for all checkboxes on the form.

Add an input listener

    <v-form-base
      :row="{ noGutters: false }"
      :col="{ cols: 12 }"
      :model="config"
      :schema="configschema"
      @input="change" 
    />

with change method as follows:

  methods: {
    // set the value of an nested property (path string) in an object. See https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-and-arrays-by-string-path
    setPath(object, path, value) {
      path.split('.').reduce((o,p,i) => o[p] = path.split('.').length === ++i ? value : o[p] || {}, object)
    },
    // checkbox in vuetify-form-base uses null, instead of false: on change convert null to false
    change({  key, obj, value }){ 
      if (obj.schema.type === 'checkbox'){
        this.setPath( this.config, key, (value ? true: false) );
      }
    },
 }

The value of key is a string representing the nested property in the object (eg "parent1.parent2.property"). The method setPath() sets the property based on that string (eg this.config.parent1.parent2.property = false).

Hope that helps someone having the same issue.

Question

If the true, null behaviour is the way it is supposed to be, how can the null value be transformed to false?

PS: Love this component you have created, thank you!

[wotamann]

Hi,

That all falsish values are set to 'zero' is a desired behavior.

But you can set a default FALSE/TRUE Value { type: 'checkbox', trueValue:'YES', falseValue:'NO' }

hope this will help and with thanks for your acknowledgement wotamann

[mrpaulharris]

@wotamann thanks for the falseValue:'NO' tip.

I can't seem to set it so that the falseValue is false. I tried:

• {type: 'checkbox', falseValue: 'false' }
• {type: 'checkbox', falseValue: false }

But neither worked.

Taking a quick look at your source code, it looks like you convert false values to null, even if I do use the vuetify false-value=false ?

[wotamann]

You are right, onInput() sets a false of the checkbox to null and this is not an intended behaviour.

I will accept your PR #97

The onInput() method harmonizes undefined or empty strings => null, because 'clearable' in vuetify controls resets to null and not to empty string.