AlpineJS：如何在x-on:click中根据条件修改变量？

你写的代码问题出在三元运算符的语法上——三元表达式要求严格遵循条件 ? 真分支表达式 : 假分支表达式的结构，你直接在真分支里写多个语句却未做正确包裹，导致JS解析失败。

当然可以在x-on:click中实现这个需求，下面是两种可行的写法：

• 用if语句实现（推荐，可读性更高）
  Alpine支持在指令中编写块级JS代码，把多个操作放在大括号里即可：

  <button x-on:click="if (step < 4) { step++; step++; done = true }">Done</button>
  

• 修正三元表达式实现
  如果一定要用三元运算符，需要把多个操作用括号包裹，通过逗号运算符串联成单个表达式，假分支可根据需求留空或补充逻辑：

  <button x-on:click="step < 4 ? (step++, step++, done=true) : ''">Done</button>
  

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