introduce-x-modelable-in-object.md

<div class="max-w-xl p-8">
    <div x-data="{ selectedOptions: {} }">
        <span x-text="selectedOptions + 'dsds'" class="font-bold bg-red-600"></span>
        @foreach (App\Enums\ConsumerFields::displaySelectionBox() as $name => $consumerField)
            <select
                x-model="selectedOptions['{{ $consumerField->value }}']"
                class="form-input"
            >
                <option value="">select one</option>
                <option value="option1" x-show="! Object.values(selectedOptions).includes('option1')">Option 1</option>
                <option value="option2" x-show="! Object.values(selectedOptions).includes('option2')">Option 2</option>
                <option value="option3" x-show="! Object.values(selectedOptions).includes('option3')">Option 3</option>
                <option value="option4" x-show="! Object.values(selectedOptions).includes('option4')">Option 4</option>
                <option value="option5" x-show="! Object.values(selectedOptions).includes('option5')">Option 5</option>
            </select>
        @endforeach
        <button class="btn" @click="() => { $wire.selectedOptions = selectedOptions; $wire.storeMappedHeaders() }">Print selected options</button>
    </div>
</div>