spotty-amber

Simplifying vue-form field binding

I'm currently trying out vue-form and I find the syntax provided in examples for binding a field to be somewhat heavy.

What if the field slot also provided a writable ref that could be used in combination with

v-model

v-model

? A common way to achieve this would be using a writable computed ref:

const model = computed({
  get() {
    return field.state.value
  },
  set(newValue) {
    field.handleChange(newValue)
  }
})

const model = computed({
  get() {
    return field.state.value
  },
  set(newValue) {
    field.handleChange(newValue)
  }
})

That way the minimal syntax required would reduce from

<form.Field name="fullName" #="{ field }">
  <input
    :value="field.state.value"
    @blur="field.handleBlur"
    @input="(e) => field.handleChange(e.target.value)"
  />
</form.Field>

<form.Field name="fullName" #="{ field }">
  <input
    :value="field.state.value"
    @blur="field.handleBlur"
    @input="(e) => field.handleChange(e.target.value)"
  />
</form.Field>

<form.Field name="fullName" #="{ field }">
  <input v-model="field.model.value" @blur="field.handleBlur" />
</form.Field>

<form.Field name="fullName" #="{ field }">
  <input v-model="field.model.value" @blur="field.handleBlur" />
</form.Field>

This still feels a bit clunky, but is definitely closer to the experience that Vue can provide out of the box. The requirement for using

.value

.value

in template could further be omitted by hiding

model

model

inside a

shallowReactive

shallowReactive

object.

Would like to hear your thoughts on this. Does this feel unnecessary/undesirable/impossible in any way or are there any concerns that the developer may outgrow using

v-model

v-model

too quick?

I tried looking if someone has asked for this specifically in conjunction with

v-model

v-model

before, but could not find anything. My apologies if this is a duplicate.

Simplifying vue-form field binding

v-model

v-model

? A common way to achieve this would be using a writable computed ref:

const model = computed({
  get() {
    return field.state.value
  },
  set(newValue) {
    field.handleChange(newValue)
  }
})

const model = computed({
  get() {
    return field.state.value
  },
  set(newValue) {
    field.handleChange(newValue)
  }
})

That way the minimal syntax required would reduce from

<form.Field name="fullName" #="{ field }">
  <input
    :value="field.state.value"
    @blur="field.handleBlur"
    @input="(e) => field.handleChange(e.target.value)"
  />
</form.Field>

<form.Field name="fullName" #="{ field }">
  <input
    :value="field.state.value"
    @blur="field.handleBlur"
    @input="(e) => field.handleChange(e.target.value)"
  />
</form.Field>

<form.Field name="fullName" #="{ field }">
  <input v-model="field.model.value" @blur="field.handleBlur" />
</form.Field>

<form.Field name="fullName" #="{ field }">
  <input v-model="field.model.value" @blur="field.handleBlur" />
</form.Field>

This still feels a bit clunky, but is definitely closer to the experience that Vue can provide out of the box. The requirement for using

.value

.value

in template could further be omitted by hiding

model

model

inside a

shallowReactive

shallowReactive

object.

Would like to hear your thoughts on this. Does this feel unnecessary/undesirable/impossible in any way or are there any concerns that the developer may outgrow using

v-model

v-model

too quick?

I tried looking if someone has asked for this specifically in conjunction with

v-model

v-model

before, but could not find anything. My apologies if this is a duplicate.

Simplifying vue-form field binding

Simplifying vue-form field binding

Similar Threads