AlpineJS如何处理多种不同的表单字段？

你的代码报错是因为两个核心问题：

• x-model语法错误：products[15]quantity这种写法不符合JavaScript对象属性的访问规则，正确写法应该用点号或方括号访问嵌套属性，比如products[15].quantity或者products[15]['quantity']。
• 未初始化嵌套对象：初始的products是空对象，Alpine.js无法自动创建products[15]或products[75]这类嵌套对象，必须预先定义好结构。

修正后的完整代码 #

<form x-data="form()">
  <input type="input" x-model="products[15].quantity"/>
  <input type="checkbox" x-model="products[15].option1"/>

  <input type="input" x-model="products[75].quantity"/>
  <input type="checkbox" x-model="products[75].option1"/>
</form>

<script>
function form() {
  return {
    products: {
      15: { quantity: '', option1: false },
      75: { quantity: '', option1: false }
    }
  }
}
</script>

动态生成产品ID的处理方案 #

如果产品ID是动态生成的（比如从后端获取），可以通过方法动态添加产品结构：

function form() {
  return {
    products: {},
    // 动态添加产品结构
    addProduct(productId) {
      if (!this.products[productId]) {
        this.products[productId] = { quantity: '', option1: false };
      }
    }
  }
}

可以在组件初始化后或触发事件时执行addProduct(xxx)，确保绑定前对象结构已存在。

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