Level 51
Make disabled a prop of the component. And move your logic inside the component.
1 like
Sep 24, 2021
4
Level 13
disable blade button
I need to disable an x-button blade component based on a condition. On a normal button I do it like this:
<button type="submit" class="mb-2 mr-2 text-black" {{ ($disabled) ? ' disabled' : '' }}>CAPTION</button>
When I change this to use the x-button component:
<x-button type="submit" class="..." {{ ($disabled) ? ' disabled' : '' }}>CAPTION</x-button>
it doesn't work but throws: syntax error, unexpected token "endif"
The components/button.blade.php is very simple
<button {{ $attributes->merge(['type' => 'submit', 'class' => '...']) }}>{{ $slot }}</button>
Obviously the blade component does not use the disabled global attribute, even if i call it like
<x-button type="submit" class="..." disabled>CAPTION</x-button>
this will not work as expected but renders to
<button type="submit" class="..." disabled="disabled">Equip</button>
Can someone give me a hint how to change the component so that I can apply the "disabled" global attribute to the button element? Thx Marco
Level 13
@webrobert thanks for your reply. I allready tried that by changing:
<x-button type="submit" class="..." :disabled="true">CAPTION</x-button>
// component:
<button {{ $attributes->merge(['type' => 'submit', 'class' => '...']) }} {{ $disabled ?? false ? ' disabled' :'' }} >
{{ $slot }}
</button>
but this also does not render correctly. Only in the button payload I can display the prop
Level 13
@webrobert sorry I forgot the @props. After adding it like this it works fine.
<x-button type="submit" class="..." :disabled="true">CAPTION</x-button>
// component:
@props(['disabled'=>false])
<button {{ $attributes->merge(['type' => 'submit', 'class' => '...']) }} {{ $disabled ?? false ? ' disabled' :'' }} >
{{ $slot }}
</button>
Thx
2 likes
Level 51
@marcow, glad you got it working. I also like doing this for :active
Please or to participate in this conversation.