How do you apply fallthrough attributes to an inner element instead of the root? defineOptions({ inheritAttrs: false });

Disable inheritAttrs and bind $attrs (or useAttrs()) to the target element

Fallthrough attributes always go to the root and can't be moved

Vue · Middle · Question 12 of 75

How do you apply fallthrough attributes to an inner element instead of the root?

<script setup>
defineOptions({ inheritAttrs: false });
</script>
<template>
  <label class="field"><input v-bind="$attrs" /></label>
</template>

✓Correct answer: Disable inheritAttrs and bind $attrs (or useAttrs()) to the target element
2Use :deep() in the template
3Fallthrough attributes always go to the root and can't be moved

Explanation

This is common for wrapped inputs: placeholder, aria-* and @input should reach the <input>, not the wrapper. Components with multiple roots must bind $attrs explicitly.

How do you apply fallthrough attributes to an inner element instead of the root?

Explanation

Further reading

Problem with a question

Test yourself