无法使用 Laravel Livewire 显示我的数据库中的值

Question

我正在使用 Livewire 组件，这是我的代码：

Search.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()
            ]);
        }
    }
}

search.blade.php :

<div class="searchcomponent">
    <h1>Search</h1>
    <input wire:model="query" type="text" placeholder="Rechercher...">
    
    @if(!empty($query))
        <ul>
            @if(!empty($vegetables))
                <div class="vegetables">

                    @foreach($vegetables as $vegetable)
                        <li><span class="material-icons">lunch_dining</span>{{ $vegetable['name'] }}</li>
                    @endforeach
                
                </div>
            @else
                <li>No result</li>
            @endif
       </ul>
    @endif
</div>

我的蔬菜模型：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Vegetable extends Model
{
    use HasFactory;

    public $timestamps = false;

    protected $fillable = ['name'];

    public function recipes(){
        return $this->belongsToMany(Recipe::class, 'vegetables_recipes', 'vegetable_id', 'recipe_id');
    }

    public function getName($id) {
        return $this->name;
    }
}

我的问题是，每次我在搜索栏中输入内容时，即使我已经在数据库中添加了一些蔬菜，我的屏幕上也只会出现“无”结果。为什么在我输入时它不显示例如 Carrot？或者我如何用我的蔬菜数据表的所有名称填充我的蔬菜数组？

Answer 1

这是因为您在山上将蔬菜数组重置为空数组。

参考这个fiddle了解更多详情：

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 /> 18=]

编辑：

或者，您也可以正确使用 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 语句而不是 @foreach 删除 @if(!empty($query)) 和 @if(!empty($vegetables)) 来代替 @forelse。例如

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

这样，当搜索框为空时，您仍然会得到蔬菜列表，如果它不为空但没有匹配的结果，您会收到“无结果”消息。

无法使用 Laravel Livewire 显示我的数据库中的值

Can't display the values from my data base with Laravel Livewire

php

database

laravel

laravel-livewire