Foks
2 months ago
632
10
Laravel

Laravel Livewire returns an script error

Posted 2 months ago by Foks

Hello, I'm trying to have Livewire to add new elements on a sidebar, however it returns an error.

Blade view:

<div>
    <div id="addIngredients" class="quickview @if(!$first == true) is-active @endif">
        <header class="quickview-header">
            <strong>@lang('recipes.ingredients.title')</strong>
            <span class="delete" data-dismiss="quickview"></span>
        </header>

        <div class="quickview-body">
            <div class="quickview-block px-3 py-3">
            <!--<button id="addNewIngredient" type="button" class="button is-success is-small is-fullwidth mb-3">@lang('recipes.ingredients.add')</button>-->
                <input class="input is-fullwidth" type="text" placeholder="Søg efter ingredients" wire:model="term" aria-haspopup="true" aria-controls="dropdown-menu">
                <div class="dropdown @if(count($results) > 0) is-active @endif">
                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
                        <div class="dropdown-content is-fullwidth">
                            @foreach($results as $result)
                                <a wire:click="addIngredient('{{ $result->name }}')" class="dropdown-item">
                                    {{ $result->name }}
                                </a>
                            @endforeach
                            @if(count($results) == 10)
                                <hr class="dropdown-divider">
                                <a href="#" class="dropdown-item">
                                    Se flere ingredientser
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
                <hr>
                <div id="ingredient-content">
                    <[email protected]($results)-->
                    @forelse($ingredients as $ingredient)
                            <div class="notification mb-3">
                                <button class="delete"></button>
                                <div class="columns is-multiline">
                                    <div class="column is-12">
                                        <p>Ingredients: @dump($ingredient)</p>
                                    </div>
                                    <div class="column is-6">
                                        <input class="input is-small" type="number" placeholder="4.584">
                                    </div>
                                    <div class="column is-6">
                                        <div class="select is-fullwidth is-small">
                                            <select>
                                                <option>Gram</option>
                                                <option>Kilo</option>
                                                <option>Pund</option>
                                                <option>Liter</option>
                                                <option>Deciliter</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    @empty
                        <div class="notification">
                            Ingen ingredientser endnu! Søg efter dem oppe i tekstfelttet oven over.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <footer class="quickview-footer">
            <button class="button is-dark" data-dismiss="quickview">Gem!</button>
        </footer>
    </div>
</div>

Class:

<?php

namespace App\Http\Livewire;

use App\Models\Ingredient;
use Illuminate\Support\Arr;
use Livewire\Component;

class RecipeIngredientPanel extends Component
{
    public $term;
    public $ingredients = [];
    public $results = [];
    public $first = true;

    public function updatingTerm($v)
    {
        $this->results = Ingredient::where('name', 'like', '%'.$v.'%')->limit(10)->get();
        $this->first = false;

        foreach($this->results as $result)
        {
            foreach($this->ingredients as $ingredient)
            {
                if($result == $ingredient)
                {
                    Arr::forget($this->results, $result);
                }
            }
        }
    }

    public function addIngredient($addedIngredient)
    {
        array_push($this->ingredients, $addedIngredient);
    }

    public function render()
    {
        return view('livewire.recipe-ingredient-panel');
    }
}

The script error that it is giving me in the console:

VM1871:1 Uncaught (in promise) ReferenceError: Sfdump is not defined
    at eval (eval at initialize (node_initializer.js:13), <anonymous>:1:9)
    at Object.initialize (node_initializer.js:13)
    at onNodeAdded (index.js:379)
    at callHook (morphdom.js:35)
    at handleNodeAdded (morphdom.js:140)
    at handleNodeAdded (morphdom.js:164)
    at handleNodeAdded (morphdom.js:164)
    at handleNodeAdded (morphdom.js:164)
    at morphdom.js:407
    at morphEl (morphdom.js:219)```

And yes, I have included @livewireStyles & @livewireScripts

Please sign in or create an account to participate in this conversation.