Can not set select option value using alpine

[mateusjunges]

Hi there! 👋

Not sure if this is a bug or if I'm doing something weird/wrong. How can I use custom option values when rendering the select options using Alpine?

<div x-data="{
   select: 'Accounting',

   options: [
    {id: 1, value: 'photo', label: 'Photography' },
    {id: 2, value: 'design', label: 'Design services' },
    {id: 3, value: 'web', label: 'Web development' },
    {id: 4, value: 'acc', label: 'Accounting' },
    {id: 5, value: 'legal', label: 'Legal services' },
    {id: 6, value: 'consulting', label: 'Consulting' },
    {id: 7, value: 'other', label: 'Other' },
   ],
}">
    <flux:select variant="listbox" searchable placeholder="Choose industries..." x-model="select">
        <x-slot name="search">
            <flux:select.search placeholder="Search..." />
        </x-slot>

        <template x-for="option in options" :key="option.id">
            <flux:option :value="option.value" x-text="option.label"/>
        </template>
    </flux:select>
</div>

Seems like this is looking for a option php constant when I add it to :value:

When you add the value using x-bind:value, the page loads with no error, but you get the following on console when selecting options:

Thank you!

[calebporzio]

Thank you for the report. This issue has been fixed and will be available in the next release.