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?

CodePudding user response：

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>

demo