Checkbox

[katre159]

Can you provide an example with a checkbox?

[Alireza Valizadeh]

  <final-field name="field-name">
            <div slot-scope="props">
              <label>
                <input
                  :name="props.name"
                  value="test"
                  type="checkbox"
                  :checked="props.value === 'test'"
                  v-on="props.events"
                > test1
              </label>
             <label>
                <input
                  :name="props.name"
                  value="test2"
                  type="checkbox"
                  :checked="props.value === 'test2'"
                  v-on="props.events"
                > test2
              </label>
              </div>
  </final-field>

[Kai Kimberg]

Checkboxes aren't mutually exclusive when they're grouped under the same name. The example above should be using input[type="radio"].

Vue has already solved the boolean v single v multiple checkbox problem:
https://vuejs.org/v2/guide/forms.html#Checkbox
https://vuejs.org/v2/guide/forms.html#Checkbox-1

If we bind our value via v-model, we can leverage Vue's handling of it. Because we're inside a scoped slot, our props are read-only, so v-model is only two-way binding as far as the scope covers. A working example looks as follows:

<final-field name="field-name">
  <div slot-scope="props">
    <label>
      <input
        :name="props.name"
        value="test"
        type="checkbox"
        @blur="props.events.blur()"
        @focus="props.events.focus()"
        @change="props.change(props.value)"
        v-model="props.value"
      > test1
    </label>
    <label>
      <input
        :name="props.name"
        value="test2"
        type="checkbox"
        @blur="props.events.blur()"
        @focus="props.events.focus()"
        @change="props.change(props.value)"
        v-model="props.value"
      > test2
    </label>
</final-field>

Now the read-only props.value is maintained by Vue via v-model and then passed back up to final-form via manually providing it to props.change(). This pattern is for type="checkbox" only and supports boolean, string, and string[] models. Other form controls have less model ambiguity and are fine binding to @input (via props.events) per normal.

I'm considering ways to reduce the added verbosity. One idea is to abstract v-on taking props.listeners(props.value) as a method rather than a computed prop and abstracting the listener logic to consider props.value before updating the form state.