Alpine.js：如何让x-model使用data属性而非输入框value值

云原生阿岚

2026-7-30

解决方法

你可以通过两种方式实现需求，无需在option上直接设置x-data，而是通过监听选择事件或预存变体数据来同步包装规格：

方法一：读取option的data属性

修改代码，将x-model绑定到变体ID，通过change事件获取选中option的data-packSize值来更新显示的包装规格：

<form x-data="{ selectedVariant: '{{product.variants[0].id}}', packSize: '{{product.variants[0].packSize}}' }">

  <select x-model="selectedVariant" @change="packSize = $event.target.options[$event.target.selectedIndex].dataset.packSize">
    <option value="variant1" data-packSize="30">variant 1 title</option>
    <option value="variant2" data-packSize="20">variant 2 title</option>
  </select>

  Pack of <span x-text="packSize"></span> items

</form>

关键修改点：

将x-model从packSize改为selectedVariant，用来绑定选中的变体ID
添加@change事件监听选择变化，通过$event.target获取当前选中的option，读取其dataset.packSize值更新packSize变量

方法二：预存变体规格到Alpine状态

如果不想操作DOM，可以把变体ID和对应包装规格提前存在x-data的对象中，通过选中的ID直接匹配规格：

<form x-data="{ 
  variants: {
    'variant1': 30,
    'variant2': 20
  },
  selectedVariant: '{{product.variants[0].id}}',
  packSize: '{{product.variants[0].packSize}}'
}" @change="packSize = variants[selectedVariant]">

  <select x-model="selectedVariant">
    <option value="variant1">variant 1 title</option>
    <option value="variant2">variant 2 title</option>
  </select>

  Pack of <span x-text="packSize"></span> items

</form>