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.

[sfaut]

Thx for the explanation 👍

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

When Alpine loops over template options, I guess it knows the parent select has a x-model applied. Couldn't Alpine magically check/select options according x-model at this moment or is there a technical difficulty ?

---

Petite-Vue manages this use-case too ⤵️

<script type="module">
    import { createApp } from "https://unpkg.com/[email protected]/dist/petite-vue.es.js";
    createApp().mount();
</script>

<main v-scope="{
    countries: [
        { id: 'IT', name: 'Italy' },
        { id: 'FR', name: 'France' },
        { id: 'DE', name: 'Germany' },
    ],
    selection: ['IT', 'DE'],
}">
    <h1>Petite-Vue -- 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>

[SimoTod]

it could but it will be additional code to just handle a single use case for a specific combination of html tags (select with x-model + option tags generated by x-for) that can easily be fixed in userland by an x-bind.
For example, there was another user on a different discussion just yesterday who was questioning why the size of the library was going up :D.
I'm not sure if a PR like that would be accepted.
At the minute no other directives are trying to figure out if a parent has a specific directive (where would you stop? You can have optgroup tags between your x-for and the select with x-model, those optgroup could be static or generated by an intermediate x-for).

It could have more chance if x-model would defer the setting of the value so it happens after the inner list was generated but I don't know if that would add other unexpected behaviour. Feel free to experiment.