x-model and select/option default values

[sfaut]

Hi !
I come from Vue and study Tailwind/Alpine/Laravel/Livewire stack.
An observation about select/option model initial value.

With Alpine I do ⤵️

<script type="module">
    import { Alpine } from "https://unpkg.com/[email protected]/dist/module.esm.js";
    Alpine.start();
</script>

<main x-data="{
    countries: [
        { id: 'IT', name: 'Italy' },
        { id: 'FR', name: 'France' },
        { id: 'DE', name: 'Germany' },
    ],
    selection: ['IT', 'DE'], // I wan them to be preselected
}">
    <h1>Alpine -- Model and Select X</h1>
    <pre x-text="JSON.stringify($data, null, 4)"></pre>
    <select
        multiple
        x-model="selection"
        x-init="$nextTick(() => Array.from($el.options).forEach(
            function (option) {
                if (selection.includes(option.value)) {
                    option.selected = true;
                }
            }
        ))"
    >
        <template x-for="country in countries" :key="country.id">
            <option
                x-bind:value="country.id"
                --other-method--x-bind:selected="selection.includes(country.id)"
                x-text="country.name"
            />
        </template>
    </select>
</main>

Whereas with Vue I can simply do ⤵️

<script type="module">
    import { createApp } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.js";

    const app = createApp({
        data() {
            return {
                countries: [
                    { id: "IT", name: "Italy" },
                    { id: "FR", name: "France" },
                    { id: "DE", name: "Germany" },
                ],
                selection: ["IT", "DE"],
            };
        },
    });

    app.mount("main");
</script>

<main>
    <h1>Vue -- Model and Select X</h1>
    <pre>{{ $data }}</pre>
    <select v-model="$data.selection" multiple>
        <option
            v-for="country in $data.countries"
            v-bind:value="country.id"
            v-bind:key="country.id"
        >
            {{ country.name }}
        </option>
    </select>
</main>

The Vue solution is much more natural and elegant. Am I missing something or is select/option initial value really not supported natively by Alpine x-model ? In this last case, is a support considered ?

The situation is ~identical with select1.

Thx,

[SimoTod]

You don't need the x-init part, it's "just" (I appreciate is not as smooth as but there are technical reasons that you can find at the bottom of this post)

<script type="module">
    import { Alpine } from "https://unpkg.com/[email protected]/dist/module.esm.js";
    Alpine.start();
</script>

<main x-data="{
    countries: [
        { id: 'IT', name: 'Italy' },
        { id: 'FR', name: 'France' },
        { id: 'DE', name: 'Germany' },
    ],
    selection: ['IT', 'FR'], // I wan them to be preselected
}">
    <h1>Alpine -- Model and Select X</h1>
    <pre x-text="JSON.stringify($data, null, 4)"></pre>
    <select multiple x-model="selection">
        <template x-for="country in countries" :key="country.id">
            <option
                x-bind:value="country.id"
                x-bind:selected="selection.includes(country.id)"
                x-text="country.name" 
            />
        </template>
    </select>
</main>

Opposite to Vue, Alpine runs directly on the browser and real dom. Directives are processed top to bottom. When alpine starts processing the x-model on the select tag, the tag itself is empty (the inner c-for hasn't run yet) so, despite it setting the value, the browser has no options to mark as selected. when the inner x-for runs, Alpine manipulates the DOM to enter the options. Browser are not smart enough to check if an option is meant to be selected when you inject it at a later stage so you need to manually add the selected property.

[slaide]

I have a very similar issue, though in my case the default option should just be whatever the first option is (which the select element will do for you). the problem is that the select.value is populated correctly but there is no way to run code when this happens, so the x-model bound to the select is not updated on x-for expansion. the easiest solution was to use x-init="$nextTick(()=>modelValue=select.value)" on the select, since the next tick will trigger after the x-for has been executed.

[ekwoka]

Directives are processed top to bottom

MOSTLY top to bottom ;)

It's possible we could just...switch the order to have x-for go before x-model? huh...why did I only just think about this...

[SimoTod]

They are on different html tags, I'm not sure it's going to work.

[willrowe]

I just ran into this. I don't think this is that rare of a use case that it is not at least worth looking to some kind of solution for. When you're writing HTML for Alpine, you're not usually thinking about the fact that source order matters, you're expecting things like x-model to work correctly.

[ekwoka]

They are on different html tags, I'm not sure it's going to work.

I'd have to look again, but I know directives are collected from the entire tree and THEN processed, pretty sure the main purpose is so that x-ref all run before other things that might depend on them.

So it's not unheard of to also move x-for before x-model, especially after the changes that made x-for initialize child trees immediately.