[Vuejs]-Vue 3 composition API passing HTML button type attribute as PROP Typescript issue

by

1👍

Import types PropType and ButtonHTMLAttributes and use them in your prop definition

<script setup lang="ts">
import type { PropType, ButtonHTMLAttributes } from 'vue';
defineProps({
  btnType: {
    type: String as PropType<ButtonHTMLAttributes['type']>,
    default: 'submit'
  }
});
</script>
👤yoduh

0👍

It’s another Typescript headache

Try updating your defineProps call to this:

const props = defineProps({
  btnType: {
    type: String as () => "submit" | "button",
    default: 'submit'
  }
});

This should tell TypeScript that you will only send it strings that are either "submit" or "button", and not other random strings, that may not be acceptable to the <button> tag’s type attribute.

👤ProfDFrancis

Leave a comment