Hello all guys, nice to meet you!
I have a problem with wire:ignore, whenever my function showCommandByCategory() is called with wire:click the result is filtered, but the CSS of highlightjs disappears, I cannot understand why the first record is shown correctly, while the following ones are not.
This is my view:
<div>
<livewire:partials.hero />
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-3">
<aside class="is-medium menu">
<p class="menu-label">
Categorie
</p>
<ul class="menu-list" x-data="{ active: false }">
<li>
<a
wire:click.prevent="showCommandByCategory({{ null }})"
@click="active = false"
href="#"
>
Reset
</a>
</li>
@foreach($categories as $val)
<li>
<a
wire:click.prevent="showCommandByCategory({{ $val->id }})"
:class="{ 'is-active': active == {{ $val->id }} }"
@click="active = {{ $val->id }}"
href="#"
>
{{ $val->title }}
</a>
</li>
@endforeach
</ul>
<p class="menu-label">
Filtra
</p>
</aside>
</div>
<div class="column is-9">
<div class="content is-medium">
<h3 class="title is-3">Comandi ¯\_(ツ)_/¯</h3>
<progress wire:loading wire:target="showCommandByCategory" class="progress is-medium is-primary" max="100">15%</progress>
@foreach($commands as $val)
<div wire:loading.class="is-hidden" class="box" wire:ignore>
<h4 class="title is-3"> {{ $val->name }}</h4>
<h5>{{ $val->category->title }}</h5>
<article class="pb-2">
<p>{{ $val->description }}</p>
</article>
<pre><code>{{ $val->command }}</code></pre>
</div>
@endforeach
</div>
</div>
</div>
</div>
</section>
</div>
And this is what happens to highlight.js css after call showCommandByCategory() function
my component is simple:
class Homepage extends Component
{
public $commands, $categories, $command_title;
public function mount()
{
$this->fill([
'commands' => Command::with('category')->orderBy('created_at', 'desc')->get(),
'categories' => CommandsCategory::all()
]);
}
public function render()
{
return view('livewire.homepage');
}
public function showCommandByCategory($id = null)
{
if($id)
{
$this->commands = Command::with('category')->where('category_id', $id)->orderBy('created_at', 'desc')->get();
$this->command_title = CommandsCategory::select('title')->where('id', $id)->get();
} else
{
$this->commands = Command::with('category')->orderBy('created_at', 'desc')->get();
$this->command_title = null;
}
}
}