[question][quasar] TypeScript error if no v-model is present in QInput Quasar Component, defineComponentBinds

[angelhdzmultimedia]

Hi,

If the v-model is not present in the QInput, then I get a TypeScript error that that component requires the v-model. I was following this guide https://vee-validate.logaretm.com/v4/examples/ui-libraries/#quasar.

So I was about to submit the issue in Quasar's Discord, until the last minute I had an idea.
In the defineComponentBinds hook config argument, which is a callback that returns the config,
I added modelValue, and solved the error!

Works

const quasarConfig = (state: any) => ({
  props: {
    error: !!state.errors[0],
    'error-message': state.errors[0],
    'modelValue': state.value
  },
})


const editProfileDataValidation = ref({
  email: defineComponentBinds('email', quasarConfig),
  password: defineComponentBinds('password', quasarConfig),
  firstName: defineComponentBinds('firstName', quasarConfig),
  lastName: defineComponentBinds('lastName', quasarConfig),
  displayName: defineComponentBinds('displayName', quasarConfig),
  passwordConfirm: defineComponentBinds('passwordConfirm', quasarConfig)
})

Does NOT work:

const quasarConfig = (state: any) => ({
  props: {
    error: !!state.errors[0],
    'error-message': state.errors[0],
  },
})


const editProfileDataValidation = ref({
  email: defineComponentBinds('email', quasarConfig),
  password: defineComponentBinds('password', quasarConfig),
  firstName: defineComponentBinds('firstName', quasarConfig),
  lastName: defineComponentBinds('lastName', quasarConfig),
  displayName: defineComponentBinds('displayName', quasarConfig),
  passwordConfirm: defineComponentBinds('passwordConfirm', quasarConfig)
})

So, either I'm missing something that I should learn about, or this is a missing information in the documentation.

Any tip will be appreciated.

[logaretm]

Thanks for submitting this. Forcing a model value prop on the binds caused type errors for other components. The modelValue is actually there but it is hidden from TypeScript.

So it seems like the Vue ecosystem requires v-model which isn't technically correct, most components will still work regardless if you provide a v-model or not. I will see if there is a valid compromise.

[angelhdzmultimedia]

Thank you for your kindness and your time!
Yeah it looks like all (or some) Quasar's components are typed with required v-model.

Wishing the team health, peace, and success.

[hinogi]

Also v-model has some build in modifiers that v-bind does not have https://vuejs.org/guide/essentials/forms.html#lazy that is also not compatible with defineComponentBinds