使用 livewire 动态添加或删除元素

Question

在LiveWire 中，我尝试在现有数组中添加一些值，我将其定义为component 中的一个字段，但是当我想在其中添加值时，在执行此操作后我有新数据，换句话说清除和设置新值的原因，例如：

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>

这里当我调用add 函数时，input 的值总是2，每次调用add 函数都应该递增。

输出：

array:1 [▼
  0 => 2
]

Answer 1

由于您的逻辑，$i 的值始终为2。

wire:click="add(1)"

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

每次单击p 元素时，都会将值1 发送到add 函数，然后该函数只需添加1 并将其保存为$this->i 的新值。如果您检查您的 $inputs 数组，您会看到它填充了所有具有值 2 的元素。

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

你更可能想要的是：

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

导致：

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

Answer 2

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