-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Method defineComponentBinds value does not have valid type #4421
Comments
What do your component props look like? why would it give an error? There is hardly anything in the binding object type-wise to error out which was intended to avoid mismatching prop types. The binding object is a computed property so it is expected for it to have a |
I just noticed the same issue when working on form components in my nuxt (3.7.0) project I haven't touched in a while. My old code (using defineComponentBinds as well) works fine but none of the types except for onBlur are available to the IDE (vscode + volar) Have you already found a solution @filipbekic01 since its been 3 weeks ? |
@mwohlan Could you create a minimal example where the type error appears? |
Having a quick look at the source + type definition, this is the one i found for BaseComponentBinds // eslint-disable-next-line @typescript-eslint/no-unused-vars
export interface BaseComponentBinds<TValue = unknown, TModel = 'modelValue'> {
onBlur: () => void;
} And this is the one for BaseInputBinds ( types are working for defineInputeBinds): export interface BaseInputBinds<TValue = unknown> {
value: TValue | undefined;
onBlur: (e: Event) => void;
onChange: (e: Event) => void;
onInput: (e: Event) => void;
} I have a feeling that this might be the cause. If not than i will do a reproduction as well. |
@logaretm I just set up a new nuxt 3.7.1 project with only the vee-validate module running in vscode 1.8.1 ( Typescript 5.1.6 ) with Volar. When using defineComponentBinds to create a ref only onBlur shows up when typing myField.value. whereas modelValue and onUpdate:modelValue are not available. However they are available at runtime of course. It seems to be a typescript issue. |
Yes, the problem is obvious. Requires minimal setup. |
Pushed a few improvements, it could possibly still have some issues but the main thing is the component binds should now contain both the model and the update model handler based on the model name and the value of that model as inferred from the form. Note that And please next time, provide the "minimal setup" if it is that "obvious" won't take 5 minutes of your time. |
What happened?
Using Vue SFC TypeScript, composition API.
Schema
Usage
The problem is that
receipt.value
has no proper type in TypeScript.I can't even use v-bind against my custom component because it does not recognize modelValue, I'm getting type errors.
Reproduction steps
No response
Version
Vue.js 3.x and vee-validate 4.x
What browsers are you seeing the problem on?
Relevant log output
No response
Demo link
https://google.com
Code of Conduct
The text was updated successfully, but these errors were encountered: