LiveWire: How to action the value of an input without a button

@vincej see https://laravel-livewire.com/docs/2.x/alpine-js

Also https://laravel-livewire.com/docs/2.x/data-binding

Scroll to Lazily Updating

Edit: Found on their forum https://forum.laravel-livewire.com/t/data-binding-not-working-with-value-changed-by-js/989

See first answer.

You can simply use wire:change="save()" on the input tag.

Hi Mark,

My Livewire set up appears to work ins o far that when I watch the Chrome Network tools, I can see ajax calls being made. However for the life of me it refuses to echo out on the page. Indeed, if I place the {{}} anywhere other that within the component I get a can't find variable error. Here is my set up:

View: registration.php.blade

<div class="col-md-2" > @livewire('rate') </div>

Component: rate .php.blade

<input type="text" class="form-control" wire:model="billingRate">
    
    <h4>
      {{$billingRate}}   {{--Trying to echo out the value here--}}
    </h4>
    

Controller: Rate.php

namespace App\Http\Livewire;

use Livewire\Component;

class Rate extends Component
{
     public $billingRate;

    public function render()
    {
        return view('livewire.rate');
    }
}

Your Livewire blade template has two root elements. Wrap the content in a single div.

@divdax Thanks but I can't see it, can you please point it out ? Thanks

The Livewire doc says:

Livewire components MUST have a single root element.

your template should look like this:

<div>
  <input type="text" class="form-control" wire:model="billingRate">
    
  <h4>
      {{$billingRate}}   {{--Trying to echo out the value here--}}
  </h4>
</div>

Oh bugger .... thank you!!! It's working.

One last thing - if I place {{$billingRate}} outside of the component, anywhere else on the page, I get a can not find variable error. Is this the way it should be ?

You only can access the variable inside a component but you could fire an event and listen for it.

Maybe this approach could help but it's experimental. Would be nice if livewire support portals out of box: https://github.com/jeffochoa/livewire-portals

I am very greatful for all your help, and that I now have my input being echoed out. However, I still have not managed to solve my essential problem - how to pass the input value to my controller without a button.

I expect that it has something to do with Events, https://laravel-livewire.com/docs/2.x/events#from-template

However, I find the docs unclear in how and when to use $emit. Can someone please show me what I am doing wrong?

Many thanks!

Like @chaudigv said: Use wire:change="save()" on your input, write a method save()in your Livewire Component and save the value of your $billingRate property. Super simple... :)

still manage to do this wrong. w/here does the $billingRate go? All I amgetting out is error:

Unable to resolve dependency [Parameter #0 [ <required> $billingRate ]] in class App\Http\Livewire\Rate

<div>
    <input type="text" class="form-control" wire:change="saveRate()">
 </div>

class Rate extends Component
{
     public $billingRate;


    public function saveRate($billingRate){

       dd($billingRate);
    }

    public function render()
    {
        return view('livewire.rate');
    }
}

<div>
    <input type="text" class="form-control" wire:model.lazy="billingRate">
 </div>

class Rate extends Component
{
     public $billingRate;


    public function updatedBillingRate(){

       dd($this->billingRate);     // don't forget to use $this to access class property

        // persist to database here
    }

    public function render()
    {
        return view('livewire.rate');
    }
}

@snapey Halleluiah! Thank you ! It works! Heaven knows what the wire:change is about.

You have the patience of a saint. I awarded you 'best answer' .

Thank you thank you !

Please watch the screencast that Caleb made which explains livewire very well. https://laravel-livewire.com/screencasts

@snapey I don't know why I am struggleing with LiveWire, maybe because I have spent so many years with JS.

ok, so your code grabs the input value nicely. Thank you.

Next I have saved the value in the DB. However, when the page refreshes I need that value to appear in the same input. If I change that value again, then again it will be saved.

However, how in the heck can I get the DB value into the same input, when the input is being occupied by the wire:model. I really don't want two inputs. In Jquery / JS I can do this.

<div>
    <input type="text" class="form-control" wire:model.lazy="billingRate">
</div>

Many Thanks !

Your field is mirrored both ways with the component.

You initialise it by setting the public property on the component in its mount() method

Here's a full example. Whenever you change the input, the model will update the model. Although it's poorly documented, updated is a hook. Big issue with Livewire and Alpine is the thin documentation.

// blade view
<input type="number" wire:model.lazy="amount">

// livewire component
    public function updatedAmount($amount)
    {
        $this->goal->update([
            'amount' => $amount
        ]);
    }