Alpine.js中如何根据selected_id设置select/option初始选中值？

你的代码里selected_id初始设为1（对应选项Bar），但页面加载后默认选中的却是Foo，问题出在动态生成option时的渲染顺序：浏览器会先渲染出所有x-for生成的option，默认选中第一个，之后AlpineJS才完成x-model的绑定，导致初始选中状态和预期不符。

下面是两种可行的解决方式：

方式一：给option绑定选中状态 #

直接在动态生成的option标签上，通过:selected判断当前option的id是否和selected_id匹配，确保渲染时就设置正确的选中状态：

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ selected_id: 1, options: [{label: 'Foo', id: 0}, {label: 'Bar', id: 1}] }">
  <select x-model="selected_id">
    <template x-for="option in options">
      <option :value="option.id" :selected="option.id === selected_id" x-text="option.label"></option>
    </template>
  </select>
  <div x-text="selected_id"></div>
</div>

方式二：确保值类型严格匹配（通用规范） #

如果后续业务中出现selected_id和option.id类型不一致（比如一个是字符串、一个是数字），也会导致选中失败。可以显式统一类型，比如在:value中强制转换类型：

<option :value="Number(option.id)" x-text="option.label"></option>

不过在你的当前场景中，两者都是数字类型，这个步骤不是必须的，但可以作为通用优化手段。

内容的提问来源于stack exchange，提问作者flappix