Hi!
I'm trying to create a particular livewire component. Basically, it is an input and a "page". The idea is to write a "command" in the input. The first part is a key to load the page, the second part of the command are parameters.
So, for instance, if you write fx 3x-5,-5,5, it should open the page fx and pass the parameters to the page (I'm math teacher :) ).
Basically, it is working... but I have a problem. Once I wrote the beginning of the command fx, the page is loaded as it should, without any parameters. But after that, when I add the parameters, the page is constantly refreshing.
My code for the view:
<div>
<input autofocus type="search"
wire:model.debounce.500ms="input_value"
placeholder="Entrer un code..."
class="border rounded p-3 focus:outline-none focus:shadow-outline-blue w-full" >
<p>Counts: {{ $renderCount }}</p>
<div>
@includeIf($current_page)
</div>
</div>
And my code for the component:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Toolbox extends Component {
public string|null $current_page = null;
public string $input_value = '';
public string $key = '';
public string $previousKey ='';
public string $params = '';
public int $renderCount = 0;
protected $rules = [
'inputValue' => 'required|string|min:4'
];
private function get_tool() {
$this->key = explode( ' ', $this->input_value )[0];
$this->params = trim( mb_substr( $this->input_value, mb_strlen( $this->key ) + 1 ) );
if ( view()->exists( 'themes.tools.' . $this->key ) ) {
$this->current_page = 'themes.tools.' . $this->key;
return;
}
// Reset the page to nothing
$this->current_page = null;
}
public function render() {
$this->get_tool();
$this->renderCount++;
return view( 'livewire.toolbox' );
}
public function increment() {
dd('here');
$this->renderCount++;
}
}
The main problem is, in particular with the function, is that the loaded page plots a function and add it dynamically. When the page is refreshed, this added div>svg is automatically deleted. I would need to reinitialize it each times.
Is there a better way to do this ?
Notice that I also tried to replace the @includeIf($current_page) by a livewire component accepting a parameter like this <livewire:toolpage-page :page="$key"/>, but unfortunately, the component is never updated :(
Hope you can help :) (and also understand what I wrote)