Question

我有2个组成部分，CastComparer和CastSearch。 CastSearch是CastComparer中的嵌套组件。

根据特定操作，CastSearch组件会发出一个CastComparer正在监听的事件，称为compare

我通过执行$this->emit('compare', $this->selected);

发出此事件

这将在我的CastComparer组件上调用一个名为makeComparison()的函数。

下面是我的CastComparer组件类

class CastComparer extends Component
{
    public $cast_members = [];

    protected $listeners = ['compare' => 'makeComparison'];


    public function render()
    {
        return view('livewire.cast-comparer');
    }

    public function makeComparison($id)
    {
        array_push($this->cast_members, $id);
        dd($this->cast_members);
    }
}

下面是我的CastSearch组件类

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Http;
use Livewire\Component;

class CastSearch extends Component
{

    public $apikey = "******";

    public $query = "";

    public $results = [];

    public $selected = null;

    public $compareKey;

    public function mount()
    {
    }

    public function render()
    {
        return view('livewire.cast-search');
    }

    public function makeSelected($result_id)
    {
        $this->selected = $result_id;
        $this->results = [];
        $this->emitUp('compare', $this->selected, $this->compareKey);
    }

    public function updatedQuery()
    {
        $results = Http::get("https://api.themoviedb.org/3/search/movie?api_key={$this->apikey}&language=en-US&query={$this->query}&page=1&include_adult=true")->json();

        if ($results && array_key_exists('results', $results)) {
            $this->results = array_slice($results['results'], 0, 10);
        }
    }
}

下面是我的CastSearch刀片

<div class="relative">
    <input wire:model.debounce.350ms="query" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Member">
    <ul class="absolute rounded border shadow bg-gray-100 w-full">

        @foreach ($results as $result)
            <li class="px-4 py-2 border-b last:border-b-0 hover:bg-gray-50">
                <button type="button" wire:click="makeSelected('{{$result['id']}}')">{{$result['title']}}</button>
            </li>
        @endforeach
    </ul>
</div>

我遇到的问题是，每次被称为$cast_members数组都会被重置。因此，例如，如果我的CastSearch组件中有5个都发出了，我希望$cast_members数组有这个

["test0", "test1", "test2", "test3", "test4"]

相反，数组似乎每次都会重置，所以我只有在第五次发射之后才拥有：

["test4"]

$cast_members也没有与任何视图的交互，因此不应该影响它。

为什么当我发出此事件时，$cast_members中的数据未保留？

谢谢

Answer 1

发生这种情况是因为每次发出事件时，组件都会被初始化！所以数组被清空了

一个可能是这样的：

不是每次都发出事件，而是只需在选择所有元素后用数组调用该事件，然后将这些元素压入CastSearch组件内的公共变量即可！

另一个解决方案可能是：

  public function makeComparison($id)
    {
        array_push($this->cast_members, $id);
        $this->emit('update-cast-array', $this->cast_members);
    }

只需将更新后的数组发送到父组件（CastSearch）并将这些值存储在另一个数组中，每次更新时，该数组都会更新并存储在父组件中

Idk，您的工作总情况是什么，但是我假设您需要这种任务需要不同的组件，您只需在相同的组件类上进行此类工作即可。

如果您有任何困惑，请告诉我！

Livewire组件中的阵列在更新时会重置

1 个答案: