KeyValue

Built on top of Filament's KeyValue form component with features like Stripe's Product and Price metadata in mind, the KeyValue component was ideally designed to handle json values where you have a value associated with a key. You must make sure to use the KeyValue inside a Livewire component to bind a wire:model that has an array of arrays containing key and value :

use Livewire\Component;
 
class ProductMetadata extends Component
{
    public array $metadata = [ 
        [
            'key' => 'php',
            'value' => 'Laravel',
        ],
        [
            'key' => 'vuejs',
            'value' => 'NuxtJS',
        ]
    ];
 
    // ...
}

<x-key-value wire:model="metadata" />

<x-key-value label="LANGUAGE" value="FRAMEWORK" />

You can personalize all translations of the component by publishing the translations files.

By default, the delete parameter will only enable the button on the right side of the row to allow the person to delete the row visually, if you are using wire:model . To delete on the server, you have two options available. The first is to use wire:model.live to enable Livewire's "live" behavior.

<x-key-value delete />

Alternatively, you can add the delete-method parameter specifying the name of a public method in the component. This way, when the button is pressed, the row will be deleted in the client-side (visually) and also the method will be called and it will receive two arguments: index and rows .

class ProductMetadata extends Component
{
    public array $metadata = [
        [
            'key' => 'php',
            'value' => 'Laravel',
        ],
        [
            'key' => 'vuejs',
            'value' => 'NuxtJS',
        ]
    ];
 
    // ...
 
    public function delete($index, $rows) 
    {
        //
    }
}

<x-key-value delete delete-method="delete" />