Level 88
If you want to combine Blade with Vue you need to be specific about it.
<hs-input type="text" label="@{{ __('dic.Username') }}">
1 like
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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>
Hello,
You can remove the attributes root tag with "inheritAttrs: false"
Vue.component('my-component', {
inheritAttrs: false,
// ...
})
Please or to participate in this conversation.