Alpine.js中select的x-model未正确绑定option value属性问题咨询

你遇到的异常不是select标签或者x-model的语法书写错误，核心原因来自两方面的叠加影响：

• Alpine在组件初始化绑定select元素的阶段，如果检测到绑定的状态变量没有预置有效值，会错误读取当前DOM默认选中option的文本内容赋值给状态，而非读取option的value属性
• 手动切换选项时会触发select原生的change事件，Alpine走正常的事件监听取值逻辑，此时会正确读取选中项的value属性更新状态，所以手动操作后绑定值就回到了预期表现

只要满足下面任意一个场景，就会复现你遇到的首屏取值异常：

• Alpine组件初始化时，tripData.clientOrder.operationType的初始值为undefined、空字符串，没有和DOM中默认选中option的value保持一致
• 项目使用的是Alpine 2.x及更早的版本，这类旧版本本身就存在select初始绑定逻辑的bug：初始化阶段不会优先匹配DOM选中项的value，反而会直接读取选中项的文本作为绑定初始值

• 优先在Alpine组件的数据定义层，给绑定的状态预置和默认选中项完全匹配的初始值，不要依赖DOM的默认选中行为反向同步数据。比如你代码里默认选中第一个value为transfer的选项，就直接把对应状态的初始值设为'transfer'，示例代码：

  Alpine.data('tripForm', () => ({
    tripData: {
      clientOrder: {
        // 初始值和DOM选中项的value严格对齐
        operationType: 'transfer'
      }
    }
  }))
  

• 如果有动态调整默认选中项的需求，记得同步更新绑定状态的初始值，保证两边数据一致；如果是使用老旧版本Alpine，建议升级到3.x以上的稳定版本，该版本已经修复了select初始化阶段的取值逻辑bug
• 不要在未给状态初始值的情况下，靠给option标签加selected属性来实现默认选中，这种写法在Alpine初始化时依然会触发异常的文本读取逻辑
• 对于带数值类型value的select，要注意初始值的类型匹配，不要把字符串类型的value和数字类型的状态值混用，避免出现选项匹配失效的问题

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