KeyValue
KeyValue component.
Keyvalue, Customization Blocks
use Livewire\Component; class ProductMetadata extends Component{ public array $metadata = [ [ 'key' => 'php', 'value' => 'Laravel', ], [ 'key' => 'vuejs', 'value' => 'NuxtJS', ] ]; // ...}<x-key-value wire:model="metadata" />KEY
VALUE
No rows added.
<x-key-value />An option to customize the headers of the component.
LANGUAGE
FRAMEWORK
No rows added.
<x-key-value label="LANGUAGE" value="FRAMEWORK" />You can customize all translations of the component by publishing the translations files.
KEY
VALUE
No rows added.
<x-key-value :placeholders="false" />KEY
VALUE
No rows added.
<x-key-value :limit="3" />An option to do not display the add row button.
KEY
VALUE
No rows added.
<x-key-value static />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.
KEY
VALUE
No rows added.
<x-key-value deletable />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 deletable delete-method="delete" />KEY
VALUE
No rows added.
<x-key-value icon="x-mark" deletable delete-method="delete" />KEY
VALUE
Header SlotNo rows added.
<x-key-value> <x-slot:header> Header Slot </x-slot:header></x-key-value>KEY
VALUE
No rows added.
<!-- $event.detail.rows: will contain the rows --> <x-key-value x-on:add="alert('Added')" x-on:remove="alert('Removed')" />
#
Compact
NEW
An option to compress the padding and display the component compacted.
KEY
VALUE
No rows added.
<x-key-value wire:model="metadata" compact />
#
Color
NEW
Tints the header text and the add button, keeping the flat treatment.
KEY
VALUE
No rows added.
<x-key-value wire:model="metadata" color="green" />
#
Colorless
NEW
An option to not display colors in the header and button.
KEY
VALUE
No rows added.
<x-key-value wire:model="metadata" :color="null" /> <!-- or --> <x-key-value wire:model="metadata" colorless />