Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

hakhsin's avatar

Remove attribute of parent

Hi, I have this simple element:

<template>
  <div>
    <label v-if="label">{{label}}</label>
    <input v-bind="$attrs" class="py-2 px-4" />
  </div>
</template>

<script>
export default {
  props: {
    label: { default: null, type: String }
  }
};
</script>

I what pass all attributes to input exempt label. So, I get label as a prop. Every thing work good except duplicate attributes. I means all attributes that I pass to the element inserted to parent element and input both. Look at this:

<hs-input type="text" label="{{__('dic.Username')}}">

</hs-input>

Compiled to:

<div type="text">
    <label>dic.Username</label>
     <input type="text" class="py-2 px-4">
</div>

See type="text" sets for div and input. How can I remove it from div (parent) element? I want to this result:

<div>
    <label>dic.Username</label>
     <input type="text" class="py-2 px-4">
</div>
0 likes
2 replies
joserick's avatar
joserick
Best Answer
Level 1

Hello,

You can remove the attributes root tag with "inheritAttrs: false"

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

Please or to participate in this conversation.