Parent-Children Form

The second demo project out of four is a parent-children form. It's a typical form, for example, for invoices or orders with products.

In this form, we will be able to add products to the list or remove them from a list.

DB Structure

First, let's quickly see what the Migration and Model look like.

database/migrations/xxx_create_products_table.php:

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->integer('price');
    $table->timestamps();
});

app/Models/Product.php:

use Illuminate\Database\Eloquent\Casts\Attribute;
 
class Product extends Model
{
    protected $fillable = [
        'name',
        'price',
    ];
 
    protected function price(): Attribute
    {
        return Attribute::make(
            get: fn($value) => $value / 100,
            set: fn($value) => $value * 100,
        );
    }
}

And a seeder to have some products:

Product::create(['name' => 'iPhone', 'price' => 999.99]);
Product::create(['name' => 'iPad', 'price' => 699.99]);
Product::create(['name' => 'iMac', 'price' => 1999.99]);

Livewire Component

Now let's create a Livewire component.

php artisan make:livewire ParentChildren

Next, let's think about what properties we will need. Obviously, for customer name and email. Then we will need one for all the products, which will be a collection. And lastly, we will need a property to store...