Laravel Livewire Component not reading simple html parameters

Question

Just started using Laravel Livewire and I have a problem with passing parameters to a livewire component.

Home.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        @livewireStyles
    </head>
    <body class="antialiased p-10">
        
        <livewire:forms.input type="text" name="Test" />

        @livewireScripts
    </body>
</html>

Component

<div class="FormsInput">
    @isset($label)
    <label for="{{ $name }}">{{ $label }}</label>
    @endisset
    <div class="">
        <input wire:model="{{ $name }}" type="{{ $type }}" name="{{ $name }}" id="{{ $name }}" placeholder="{{ $placeholder }}">
    </div>
    @isset($helper)
    <div class="">
        {{ $label }}
    </div>
    @endisset
    <div class="">
        {{ $error }}
    </div>
</div>

Http/Livewire/Forms/Input

<?php

namespace App\Http\Livewire\Forms;

use Livewire\Component;

class Input extends Component
{
    public function render()
    {
        return view('livewire.forms.input');
    }
}

This is the error that I get:

ErrorException
Undefined variable $name

Forgot the property?

user8034901
– user8034901

2022-03-07 11:46:31 +00:00
Commented Mar 7, 2022 at 11:46 — user8034901
– user8034901, Commented Mar 7, 2022 at 11:46

Suhail Kawsara · Accepted Answer · 2022-03-07 12:40:46Z

2

To fix this error you have to do two things:

Add name property to your component because Livewire components store and track data as public properties on the component class.


class Input extends Component
{
   public string $name;

     ...
}

Use property name on wire:model without '$'

<input wire:model="name" ... />

You can find data binding on Livewire docs at this Link.

edited Mar 7, 2022 at 12:40

answered Mar 7, 2022 at 12:34

Suhail Kawsara

5265 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Livewire Component not reading simple html parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related