Access HTMLAttributes using script setup

June 24, 2022

So I have an Input component, and I would like to inherit all the default Input Attributes, this is my script

<script setup lang="ts">
import { defineProps, InputHTMLAttributes } from "vue";

interface Props extends InputHTMLAttributes {
  label?: string;
}

defineProps<Props>();
</script>

I would like to know what am I supposed to put in my tag to get the attributes. This is my template so far:

<template>
  <div>
    <span v-show="label">{label}</span>
    <input {?????} />
  </div>
</template>

>Solution :

Add another script tag in which make inheritAttrs:false then bind $attrs to the input tag :

<script setup lang="ts">
import { defineProps, InputHTMLAttributes } from "vue";

interface Props extends InputHTMLAttributes {
  label?: string;
}

defineProps<Props>();
</script>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  inheritAttrs:false
})
<template>
  <div>
    <span v-show="label">{label}</span>
    <input v-bind="$attrs" />
  </div>
</template>
</script>