laravel livewire refresh when updating variable - laravel

Question

As you can see I am trying to make a list of categories, using ul/li on laravel livewire, the problem is that when I click on the "+" it transform to "-" as expected but retransform to "+", because I think DOM reloads.
controller:
<?php
namespace App\Http\Livewire\Product;
use App\Classes\Product\ShopifyCatList;
use Livewire\Component;
class ShopifyNewCategory extends Component
{
public $categories, $html;
private function getFirstCat()
{
$shopifyCatList = new ShopifyCatList();
$this->categories = $shopifyCatList->getFirstCat();
}
public function addChildren($rank)
{
$shopifyCatList = new ShopifyCatList();
$this->categories = $shopifyCatList->updateCategories($rank);
$this->html = $shopifyCatList->updateHtml($this->html, $this->categories, $rank);
}
public function mount()
{
$this->getFirstCat();
$this->html = '<li data-rank="' . $this->categories[0]['rank'] . '"><span class="sign" x-on:click="openList">+</span><span class="content">' . $this->categories[0]['name'] . '</span></li>';
}
public function render()
{
return view('livewire.product.shopify-new-category')->extends('layouts.app-livewire')->section('content');
}
}
view:
#section('header')
<div id="innerheader" style="display: flex;flex-direction: row;">
<div style="flex:auto">
<h1>Création nouvelle catégorie</h1>
</div>
</div>
#endsection
{{-- section content est mis dans le controller sinon form ne fonctionne pas correctement https://laracasts.com/discuss/channels/livewire/laravel-livewire-submitprevent-not-working-refreshing-page --}}
<form wire:submit.prevent="newCategory">
#csrf
<div class="form-group">
<label for="name">Nom de la catégorie</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Nom de la catégorie"
wire:model="name">
#error('name')
<span class="text-danger">{{ $message }}</span>
#enderror
</div>
<div class="form-group">
<label for="parent" id="parent">Catégorie parent: <b></b></label>
<div x-data="categories" id="parent" class="border rounded bg-white overflow-auto" style="height:40vh;">
<ul style="padding-left:2%">
{!! $html !!}
</ul>
</div>
#error('parent')
<span class="text-danger">{{ $message }}</span>
#enderror
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-success mr-1" wire:click="updateValue('save')">Enregistrer</button>
<button type="submit" class="btn btn-primary" wire:click="updateValue('saveRecreate')">Enregistrer et
créer un autre</button>
</div>
</form>
#push('styles')
<style>
.content ul {
list-style: none;
}
span.sign {
margin-right: 6px;
}
.content li {
cursor: pointer;
}
.content li:hover {
background-color: #39F856;
}
</style>
#endpush
<script>
categories = () => {
return {
selected: '',
labelNoticeSelected: $('label#parent b'),
openList: (e) => {
if (e.target.innerText === '+') {
e.target.innerText = '-';
#this.addChildren(e.target.parentNode.getAttribute('data-rank'));
} else if (e.taget.innerText === '-') {
e.target.innerText = '+';
e.target.parentNode.parentNode.querySelector(
`li[data-rank='${e.target.parentNode.getAttribute('data-rank')}']+ul`).style
.display = 'none';
}
}
}
}
</script>
Here is all the code, I am also using alpinejs, when I click on the "+" I want to request db for children of the category I click on (that is ok) then I want it to transform "+" to "-" (that is not ok) so when I click on "-" it hides the children.
thanks for reading all of this and thanks to everyone trying to help.

Answer 1

Either use a shared state between Livewire and Alpine (see docs) or wrap your button in a wire:ignore. (Potentially a wire:ignore.self if the DOM inside of the ignored div does require Livewire updates)