如何通过Htmx提交Alpine.js的$store数据？

问题根源 #

你之前通过x-bind绑定data属性的方式，因为DOM的dataset只能存储字符串，数组会被自动调用toString()转成逗号分隔的字符串，导致后端收到的是字符串而非数组格式。下面是两种更语义化的解决方法：

• 直接调用Htmx的JS API提交
  绕开DOM属性的字符串限制，直接在点击事件里用Alpine调用Htmx的POST API，原封不动传递$store中的数组：

  <button x-on:click="htmx.post('/example', { myValues: $store.values })">
    提交选中项
  </button>
  

• 用hx-vals的JavaScript模式直接读取$store
  Htmx的hx-vals支持js:前缀使用JS表达式，无需通过data属性中转，直接读取$store的数组，保持声明式写法的同时传递正确格式：

  <button hx-post="/example" hx-vals='js:{ myValues: $store.values }'>
    提交选中项
  </button>
  

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