Laravel：由于foreach循环，添加到收藏夹按钮正在复制

Question

对于一个项目，我创建了一种方法，人们可以将他们想购买的产品添加到愿望清单中。目录中的所有项目都存储，每篇文章都有可单击的Hearticon。单击后，将其添加到我的数据库中。 但是，当将文章添加到收藏夹中时，图标会变成红色，但原始的透明图标仍然存在。因此，添加到收藏夹的文章都有一个填充和透明的图标，这不是应该完成的方式。 这是我的代码：

我的观点：

                <div class="flex flex-col justify-evenly items-center lg:flex-row flex-wrap justify-between gap-y-20 gap-x-2 lg:p-20 lg:w-12/12"> 
                    @foreach ($articles as $article)
                        <div class="w-8/12 lg:w-3/12 flex flex-col justify-between xl:h-100">
                            <form action="{{route('wishlist.store', $article->id)}}" id="wish_form" method="post">
                                {{csrf_field()}}
                                <input name="user_id" type="hidden" value="{{Auth::user()->id}}" />
                                <input name="article_id" type="hidden" value="{{$article->id}}" />
                                <button type="submit" class=""><img src="{{ 'icons/0heart.png' }}" alt="" width="25" onclick="this.form.submit()" id="emptyHeart"></button>
                                @foreach ($wishlists as $wishlist)
                                    @if ($wishlist->article_id === $article->id )
                                        <button type="submit"><img src="{{ 'icons/1heart.png' }}" alt="" width="25" onclick="this.form.submit()" id="checked"></button>
                                    @endif
                                @endforeach
                              </form>
                            <div class="h-2/3 xl:h-1/3 flex justify-center items-center">
                                {{-- <img src="{{$article->image}}" alt="" class="h-40"> --}}
                            </div>
                                <div class="h-20 mt-2">
                                    <h4 class="text-md text-center flex"><strong>{{ $article->title }}</strong></h4>
                                </div>
                                <div class="flex flex-row flex-wrap justify-between items-center mt-4">   
                                    <p class="p-2">{{$article->prijs}}</p> 
                                    <p>Beschikbaar via {{$article->website->title}}</p>
                                </div> 
                        </div>   
                    @endforeach
                </div>

我的控制器：

class FilterController extends Controller
{

    public function catalogus(Request $r)
    {
        $articles = Article::all();
        $categories = Category::all();
        $websites = Website::all();
        $wishlists = Wishlist::all()->where('user_id',auth()->user()->id);
        $list = Wishlist::all()->where('article_id', $articles->id);
        dd($list);
        return view('catalogus', compact('articles', 'categories', 'websites', 'wishlists', 'list'));
    }

}

我的模型：

class Wishlist extends Model
{
    protected $table = "wishlists";

    protected $fillable = [
        'user_id',
        'article_id',
        'confirmed',
        'available'
    ];

    protected $casts = [
    ];

    public function user()
    {

        return $this->belongsTo(User::class);
        
    }

    public function article()
    {

        return $this->belongsTo(Article::class);
    
    }

Answer 1

您可以使用 contains（）收集方法

<form action="{{route('wishlist.store', $article->id)}}" id="wish_form" method="post">
    {{csrf_field()}}
    <input name="user_id" type="hidden" value="{{Auth::user()->id}}"/>
    <input name="article_id" type="hidden" value="{{$article->id}}"/>

    @if ($wishlists->contains('article_id', $article->id))
        <button type="submit">
            <img src="{{ 'icons/1heart.png' }}" alt="" width="25"
                 onclick="this.form.submit()" id="checked">
        </button>
    @else
        <button type="submit" class="">
            <img src="{{ 'icons/0heart.png' }}" alt="" width="25"
                 onclick="this.form.submit()" id="emptyHeart" />
        </button>
    @endif
</form>