Laravel Livewire component PROPERTIES are empty inside a div class

Question

I created a Flash livewire component, it works pretty fine bu I'm having a weird issue with a specific div when trying to change dynamically its class value it appears that the properties {$type and $colors} are empty (but only in that div, outside it's not empty), I'm not sure what is preventing those properties from being recognized! Please this is the blade file:

<div x-data="{ open: false }" @flash-message.window="open = true; setTimeout(() => open = false ,7000);">
    <div x-show="open" x-cloak class="border px-2 py-2 mb-2 rounded {{ $type ? $colors[$type] : '' }}" >
        {{ $type ? $colors[$type] : '' }}{{ $message }}
    </div>
</div>

the Flash class component :

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Flash extends Component
{
    public $message;
    public $type;
    public $colors = [
        'error' => 'border-red-700 text-red-700 bg-red-200',
        'success' => 'border-green-700 text-green-700 bg-green-200',
        'warning' => 'border-orange-700 text-orange-700 bg-orange-200',
        'info' => 'border-blue-700 text-blue-700 bg-blue-200'
    ];
    protected $listeners = ['flash' => 'setFlashMessage'];

    /**
     * Set the message & type to be displayed on the event 
     *
     * @param string $message
     * @param string $type
     * @return void
     */
    public function setFlashMessage( $message,  $type)
    {
        $this->message = $message;
        $this->type = $type;

        $this->dispatchBrowserEvent('flash-message');
    }

    public function render()
    {   
        return view('livewire.flash');
    }
}

And it should be displaying the div styled as following: but in contrary it's displaying the model as following:

Can anyone check that code and find what's missing or what's wrong with it?

Thank you!

You have quotes around your variable '$colors[$type]' so it's treated as a string and not interpreted as a variable — Qirel
– Qirel, Commented Sep 4, 2022 at 14:04
Thank you for your feedback but even without them it keeps displaying an empty string! — MiraTech
– MiraTech, Commented Sep 4, 2022 at 17:16

MiraTech · Accepted Answer · 2022-09-06 05:16:20Z

0

After several temptation I finally was able to handle/bypass this issue, by bringing out the condition outside of that specific div as following:

<div x-data="{ open: false }" @flash-message.window="open = true; setTimeout(() => open = false ,7000);">
    @if ($type)
        <div x-show="open" x-cloak class="border px-2 py-2 mb-2 rounded {{ $colors[$type] }}" >
            {{ $message }}
        </div>
    @endif
</div>

This is how I've been able to display properly that: If someone in the future may know the reason why the way in the question wasn't working properly and update this solution that would be great!

answered Sep 6, 2022 at 5:16

MiraTech

1,3841 gold badge21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Livewire component PROPERTIES are empty inside a div class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related