I have an Input component like this:
<template>
<div>
<input v-bind="$attrs"/>
</div>
</template>
I want to bind input attributes(like autofocus, placeholder, and...) just on the input tag but it also binds on the parent div tag. The div tag is important and I can't ignore this tag in the Input component. what's wrong?
When there's a single root element (like the div in your case), attributes are automatically applied to that element.
You can disable that behavior with inheritAttrs=false:
<script>
export default {
inheritAttrs: false,
}
</script>