I'm trying to replace my Vue 2 options API props object code with Vue 3 script setup syntax in typescript.
Existing:
type: {
type: String,
default: 'button',
validator: (prop) => ['button', 'submit', 'reset'].includes(prop)
}
I have this so far:
<script lang="ts" setup>
interface Props {
type?: string;
}
const props = withDefaults(defineProps<Props>(), { type: 'button' });
</script>
but I can't find any info on how to handle prop validators in the script setup syntax
CodePudding user response:
I believe I've worked it out, still new to typescript but this should be the equivalent (will be validated in typescript rather than vue runtime)
interface Props {
type?: 'button' | 'submit' | 'reset';
}
CodePudding user response:
You can use in defineProps
the same structure as in Options API. (DOCS)
<script lang="ts" setup>
type Type = 'button' | 'submit' | 'reset';
interface Props {
type: Type;
}
const props = defineProps<Props>({
type: {
type: String,
default: 'button',
validator: (prop: Type) => ['button', 'submit', 'reset'].includes(prop)
}
});
</script>