2 months ago

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 id="addIngredients" class="quickview @if(!$first == true) is-active @endif">
        <header class="quickview-header">
            <span class="delete" data-dismiss="quickview"></span>

        <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 }}
                            @if(count($results) == 10)
                                <hr class="dropdown-divider">
                                <a href="#" class="dropdown-item">
                                    Se flere ingredientser
                <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 class="column is-6">
                                        <input class="input is-small" type="number" placeholder="4.584">
                                    <div class="column is-6">
                                        <div class="select is-fullwidth is-small">
                        <div class="notification">
                            Ingen ingredientser endnu! Søg efter dem oppe i tekstfelttet oven over.

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



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.