Livewire resize But...

https://hugo-indol-chi.vercel.app/2024/08/livewire-resize-but.../

LiveWire meteor.js LiveView

Before using LiveWire, JavaScript was always the language used for both frontend and backend development. When choosing a framework, one of the most important factors to consider is validation.

Validation is a crucial and time-consuming aspect of development. It needs to be performed on the frontend, backend, and when modifying the database through input, update, or delete operations. In some cases, the validation process may be performed twice. Typically, the backend performs validation using the same language. This makes validation a reusable function. On the other hand, the frontend often uses JavaScript, which is a different language.

This is where Meteor.js comes in as the best option. It provides all the necessary packages for full-stack development through npm. However, there was a drawback at that time - Node.js 14 was considered too old due to its use of fibers. The combination of Meteor.js and Node.js 14 made it difficult to separate concerns. Fortunately, Meteor.js v3 has made a comeback.

At present, Livewire offers similar advantages by allowing validation to be performed using the same backend function and the same PHP language. Additionally, it provides automatic rendering with two-way binding.

As for LiveView, I am still trying to understand how it works. At this point, I have two questions: Can frontend validation be performed using backend functions? The answer is yes. Can frontend developers easily modify and work together with Vue, React, Alpine, and other frameworks? I don't have an answer to that yet.

PS

If I had to replace Meteor.js today
https://medium.com/@alexandre.penombre/if-i-had-to-replace-meteor-js-today-6647f4bd99b3

In 2024, It’s Simple to Redo a Lightweight Meteor.js...

Livewire form and outside form with button action maybe different your think

In liveiwre word some button action and alpine @click action be clicked, livewire 3 update (ajax) is different your think. Component

    public $test_input=1;

    public function tt()
    {
        info('tt');
        info($this->test_input);
    }

blade

        <div class="row row-cols-1 row-cols-md-3 g-4" x-data>
            <form wire:submit="tt">
                <input type="text" wire:model='test_input'>
                <button type="submit">form type=submit</button> {{-- // update (ajax) --}}
                <button type="button">form type=button</button> {{-- // No update (ajax) --}}

                <button wire:click='tt; $wire.test_input=3;'>form wire:click</button> {{-- // update (ajax) and run twice --}}
                <button @click='$wire.tt; $wire.test_input=3;'>form @click</button> {{-- // update (ajax) and run twice --}}
            </form>

            <button type="submit">out form type=submit</button> {{-- // No update (ajax) --}}
            <button type="button">out form type=button</button> {{-- // No update (ajax) --}}

            <button wire:click='tt; $wire.test_input=3;'>out form wire:click</button> {{-- // update (ajax)  --}}
            <button @click='$wire.tt; $wire.test_input=3;'>out form @click</button> {{-- // update (ajax)  --}}
        </div>

So be careful and try to understand
1. what time public variable have value or be set value
2. run twice, not run one.

Laravel Livewire with WinNMP Part II

https://github.com/sueboy19/livewire_demo

livewire checkbox

php

public $check_items;

public function mount()
{
   $this->check_items = collect(["png" => true, "scs" => true, "scz" => false, "xml" => true, "pdf" => false, ]);
}

blade

@forelse($check_items as $index => $item)
  
@empty
@endforelse

livewire public variable eloquent for security column

Get livewire public variable

Front web Try to get public $order

document.addEventListener('livewire:load', function () {
  console.log(@this.order);

Get empty Array

livewire window.livewire.find eloquent collection

https://github.com/livewire/livewire/issues/1641?fbclid=IwAR0uHylkj-1vg8p5jUoBgPYfuAYsWnBhgp6EK2bJcBce8ze-tdtAa8ElLNY#issuecomment-736146468

Eloquent Collection data won't be made available to the front end unless you have the collection properties specified in the $rules array as the contents are models, so the same conditions apply to it as apply to just a single model property. This is for security reasons so the whole collection and all properties aren't just sent to the front end.

See the example here of binding to an eloquent collection https://laravel-livewire.com/docs/2.x/properties......

But a standard collection (not eloquent) will work but only with primitive data types. If any models are added to the collection or any php objects (not eloquent models), they will be serialised into an array.

So eloquent use for public variable is OK.

======

Other way use makeHidden()

livewire locale lang

middleware

routes/web.php

Route::group(['prefix' => 'member', 'as' => 'member.', 'middleware' => ['auth', 'setLocale:zh-tw']], function () {
    Route::get('/', App\Http\Livewire\MemberList::class);
});

app/Http/Middleware/SetLocale.php.php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class SetLocale
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next, string $lang)
    {
        app()->setLocale($lang);
        
        return $next($request);
    }
}

Search two time then change paginate table record have problem

https://github.com/livewire/livewire/issues/1908

laravel livewire file update Real-Time File Validation mutile files

 https://laravel-news.com/livewire-file-upload

Real-Time File Validation

use Livewire\Component;
use Livewire\WithFileUploads;

class Show extends Component
{
    use WithFileUploads;
    
    public $files = [];
    
    
    public function updatedFiles() // 即時檢查檔案格式
    {
        $this->validate([
            'files.*' => 'image|max:1024', // 1MB Max
        ]);
    }
    
    public function store()
    {
        $filenames = collect($this->photos)->map->store('photos');
        'files' => $filenames->implode(','),

updatedFiles() is Hook into the “updated”

updatedPhoto  public $Photo
updatedPhotos public $photos = []
updatedFile   public $file
updatedFiles  public $files = []

laravel livewire Name problem

Use - and lowwercase

App/Http/Livewire/Order/DropdownMaterial.php

class DropdownMaterial extends Component
{

resources/views/livewire/order/create.blade.php

@livewire('order.dropdown-material', ['post' => $order_material_id])

Laravel livewire have Big Problem!

When juse livewire at blade.php

Must have Div At first.

<div style="text-align: center">
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

<div>

<button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
    
<button class="btn btn-success btn-block" wire:click="create">
            {{ trans('global.add') }} {{ trans('cruds.order.title_singular') }}
        </button>   
</div>

laravel livewire namespace

App/Http/Livewire/Orders.php

namespace App\Http\Livewire;

use Gate;
use Livewire\Component;
use Symfony\Component\HttpFoundation\Response;

class Orders extends Component
{
    public function render()
    {
        abort_if(Gate::denies('order_access'), Response::HTTP_FORBIDDEN, '403 Forbidden');
        
        return view('livewire.order');
    }
}

resources/views/livewire/order.blade.php

@extends('layouts.app')
@section('content')
    @livewire('order.show')
@endsection

App/Http/Livewire/Order/Show.php

    namespace App\Http\Livewire\Order;

    public function render()
    {
        abort_if(Gate::denies('order_access'), Response::HTTP_FORBIDDEN, '403 Forbidden');
        
        $this->orders = Order::all();
        // Order::where('owner_id', auth()->id())->get(); // 只能看自己

        return view('livewire.order.show');
    }

resources/views/livewire/order/show.blade.php

{{ virables }}