'Error occurring when using v-model in Vue 3

The following error produced by ESLint when using v-model in Quasar/Vue 3

Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive

<q-input class="q-pa-lg" outlined :dense='true' id="username" label="Email" type="text" v-model="v$.email.$model" :error="v$.email.$error" :error-message="v$?.email?.$errors[0]?.$message" autofocus/>

See the screenshot below:

enter image description here

vue.jsquasar-frameworktypescript-eslint


Solution 1:[1]

Argument of type ‘unknown’ is not assignable to parameter of type string | number | null | undefined

This error is a general Typescript error, happening when type of input data/variable is unknown.

In your case, type of v$.email.$model is unknown and type of v-model will accept string.

I am not sure about the exact fix but you can have a look in this Doc (VueJS - Different ways to implement v-model)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rohìt Jíndal

Related Questions