T
TanStack•11mo ago
sensitive-blue

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 ? 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>
to 
<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 in template could further be omitted by hiding model inside a 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 too quick? I tried looking if someone has asked for this specifically in conjunction with v-model before, but could not find anything. My apologies if this is a duplicate.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?