x-model doesn't work for initial value.

[Sulaymon-dev]

The x-model does not update the selected element on init:
When the page is initialized, the first selectbox selected correctly, but the other selectboxes select only the first option.
if i change the value of the model, then it works correctly.

CodePen Link: https://codepen.io/sulaymon-dev/pen/dyeyaXL?editors=1111

My JSON

[
  {
    "id": 1,
    "name": "SessionSet_A1",
    "xsessions": [
      {
        "id": 0,
        "name": "Select",
        "xsteps": [
          {
            "id": 0,
            "name": "Select"
          }
        ]
      },
      {
        "id": 1,
        "name": "Session1",
        "xsteps": [
          {
            "id": 0,
            "name": "Select"
          },
          {
            "id": 1,
            "name": "IOS"
          },
          {
            "id": 2,
            "name": "Student Station"
          },
          {
            "id": 3,
            "name": "Classroom"
          },
          {
            "id": 4,
            "name": "Hardware"
          },
          {
            "id": 5,
            "name": "Software"
          },
          {
            "id": 6,
            "name": "Finalizing"
          }
        ]
      },
      {
        "id": 2,
        "name": "Session2",
        "xsteps": [
          {
            "id": 0,
            "name": "Select"
          }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "SessionSet_A2",
    "xsessions": [
      {
        "id": 0,
        "name": "Select",
        "xsteps": [
          {
            "id": 0,
            "name": "Select"
          }
        ]
      },
      {
        "id": 5,
        "name": "Session5",
        "xsteps": [
          {
            "id": 0,
            "name": "Select"
          },
          {
            "id": 7,
            "name": "tempStep"
          }
        ]
      }
    ]
  },
  {
    "id": 3,
    "name": "SessionSet_A3",
    "xsessions": [
      {
        "id": 0,
        "name": "Select",
        "xsteps": [
          {
            "id": 0,
            "name": "Select"
          }
        ]
      }
    ]
  },
  {
    "id": 4,
    "name": "SessionSet_A4",
    "xsessions": [
      {
        "id": 0,
        "name": "Select",
        "xsteps": [
          {
            "id": 0,
            "name": "Select"
          }
        ]
      },
      {
        "id": 3,
        "name": "Session3",
        "xsteps": [
          {
            "id": 0,
            "name": "Select"
          }
        ]
      },
      {
        "id": 4,
        "name": "Session4",
        "xsteps": [
          {
            "id": 0,
            "name": "Select"
          }
        ]
      }
    ]
  }
]

My HTML

       <main class="space-y-6 px-4" x-data="app">

      <input type="text" x-model="setid" />
      <input type="text" x-model="ssid" />
      <input type="text" x-model="stepid" />

      <select x-model="setid">
        <template x-for="sessionSet in sessionSets">
          <option
            :value="sessionSet.id"
            x-text="sessionSet.name"
            :key="sessionSet.id"
          ></option>
        </template>
      </select>

      <select x-model="ssid">
        <template x-for="session in sessions">
          <option
            :value="session.id"
            x-text="session.name"
            :key="session.id"
          ></option>
        </template>
      </select>

      <select x-model="stepid">
        <template x-for="step in steps">
          <option :value="step.id" x-text="step.name" :key="step.id"></option>
        </template>
      </select>
    </main>

My JS

  function app() {
        return {
          sessionSets: [],
          sessions: [],
          steps: [],
          setid: "",
          ssid: "",
          stepid: "",
          isLoading: true,
          init() {
           fetch("https://api.npoint.io/b94e68bcade33cc890f1")
              .then((res) => res.json())
              .then((resJson) => {
                this.sessionSets = resJson;
                this.isLoading = false;

                this.setid = "1";
                this.ssid = "1";
                this.stepid = "3";
              });

            this.$watch("setid", (setid, o) => {
              const SessionSet = this.sessionSets.find((s) => s.id == setid);
              if (SessionSet) {
                this.sessions = SessionSet.xsessions;
              } else this.sessions = [];
            });

            this.$watch("ssid", (ssid) => {
              const session = this.sessions.find((s) => s.id == ssid);
              if (session) {
                this.steps = session.xsteps;
              } else this.steps = [];
            });
          },
        };
      }

[SimoTod]

Directives are processed top to bottom. When your code initialises x-model, x-for hasn't run so there's nothing to select.
You can add the selected attribute to the relevant option tag in your x-for loop

[ekwoka]

Sure, but also just having :selected on the options isn't that bad either....

[bennadel]

Agreed that this is an OK work-around. But, it feels akin to having to add :checked bindings to checkbox and radiobox inputs. It's simply nice that the framework handles that kind of stuff seamlessly for you.

[ekwoka]

True.

[SimoTod]

I think that a PR for this will be accepted since it's a common question/pain point, if you want to try
I'd say that it doesn't even need to have complex logic about the tag type. I would just wait 1 tick before calling the effect that set the initial value.

[ekwoka]

maybe even just queueing it as a microtask, no need to wait a tick.