無法使用 Laravel Livewire 顯示我的數據庫中的值

Question

我正在使用 Livewire 組件，這是我的代碼：

搜索.php：

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Recipe;
use App\Models\Vegetable;
use App\Models\VegetablesRecipe;


class Search extends Component
{
    public $query = '';
    public $vegetables;

    public function mount()
    {
        $this->resetQuery();
    }

    public function resetQuery()
    {
        $this->vegetables = [];
    }

    public function render()
    {
        if ($this->query != null) {
            return view('livewire.search', [
                'vegetables' => Vegetable::where('name', 'like', '%'.$this->query.'%')->get()->toArray()
            ]);
        } else {
            return view('livewire.search', [
                'vegetables' => Vegetable::all()->toArray()
            ]);
        }
    }
}

Answer 1

因為在安裝時您將蔬菜陣列重置為空陣列

有關更多詳細信息，請參閱此小提琴

https://laravelplayground.com/#/snippets/f51e212a-dab3-4325-b6b0-4c6af4c0ab72

Answer 2

定義public $vegetables; 將阻止您將其傳遞給視圖。 刪除它。 還要刪除您的安裝邏輯。

因此你應該有：

class Search extends Component
{
    public $query = '';

    public function render()
    {
        if ($this->query != null) {
            return view('livewire.search', [
                'vegetables' => Vegetable::where('name', 'like', '%'.$this->query.'%')->get()->toArray()
            ]);
        } else {
            return view('livewire.search', [
                'vegetables' => Vegetable::all()->toArray()
            ]);
        }
    }
}

還要確保從使用<livewire:search />的主視圖中調用@livewireScripts和@livewireStyles或它們的替代語法<livewire:styles /> <livewire:scripts /> > 。

編輯：

或者，您也可以正確使用 public 並使用 $this->vegetables 寫入它，如下所示：

class Search extends Component
{
    public $query = '';
    public $vegetables;

    public function render()
    {
            $this->vegetables = Vegetable::where('name', 'like', '%' . $this->query . '%')->get()->toArray();
            return view('livewire.search');
    }
}

Answer 3

此外，您可以使用@empty<\/code>語句而不是@foreach<\/code>刪除@if(!empty($query))<\/code>和@if(!empty($vegetables))<\/code>來代替@forelse<\/code> 。 例如

@forelse($vegetables as $vegetable)
    <li><span class="material-icons">lunch_dining</span>{{ $vegetable['name'] }}</li>
@empty
    <li>No result</li>
@endforelse