I'm using VueJs (coming from React so I'm new), and I have this input which contains a code => combinations of vowels and numbers. I'm having 2 problems, first of all
I'm not sure which be the correct type for the input, and, in second instance my var defined as number | string is throwing error.
I know it might be a kind of stupid problem but I'm new with Vue & TypeScript so it would be really helpful if you can tell me the correct way to do it.
Here's the code:
<template>
<form>
<label>Code</label>
<input
type="text"
placeholder="enter a code using only vowels and numbers"
required
maxlength="15"
minlength="7"
v-model="codeValue" <!-- Error here -->
@blur="handleFocus"
/>
<span v-if="focused">You should only enter vowels and numbers.</span>
</form>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: 'InputValidations',
data() {
return {
emailValue: '' as string,
selectedNumber:0 as number,
codeValue: '' as string | number,
focused: false as boolean
}
}
})
</script>
The error comes from v-model="codeValue" and says:
Argument of type 'string | number' is not assignable to parameter of type 'string | null | undefined'.
Type 'number' is not assignable to type 'string'.VueDX/TS(2345)