Dynamicaly add or remove elements with livewire

Question

in LiveWire i try to add some value in existing array witch i defined that as a field into component, but when i want to add value in that, i have fresh data after doing this action in other word that cause of clear and setting new value, for example:

class Students extends Component
{
    public $inputs = [];
    public $i = 1;

    public function add($i)
    {
        $i = $i + 1;
        $this->i = $i;
        array_push($this->inputs ,$i);
    }
 
    public function remove($i)
    {
        unset($this->inputs[$i]);
    }
}

<p wire:click="add(1)" class="t-text-lg">
    ...
</p>

here when i call add function, input value is 2 always, each calling add function should be incremented.

output:

array:1 [▼
  0 => 2
]

Answer 1

The value of $i is always going to be 2 because of your logic.

wire:click="add(1)"

public function add($i)
{
    $i = $i + 1;
    $this->i = $i;
    array_push($this->inputs ,$i);
}

Every time you click the p element, you send the value 1 to the add function which then just adds 1 and saves that as the new value for $this->i. If you check your $inputs array you'll see it fill with elements all with the value 2.

array:2 [▼
  0 => 2
  1 => 2
]

What you more likely want is:

public function add($i)
{
    $this->i = $this->i + $i;
    array_push($this->inputs, $this->i);
}

Resulting in:

array:2 [▼
  0 => 1
  1 => 2
]