Alpine.js数据未更新问题：submitDisabled值无法在按钮中同步

问题根源 #

问题出在箭头函数的this指向上。你定义的submitActivator是箭头函数，它的this绑定的是定义时的全局上下文（即window对象），而非Alpine.js的组件实例。因此你在函数里修改的this.submitDisabled，其实是给window新增了一个属性，并没有真正更新Alpine组件内的submitDisabled状态。

修复方案 #

1. 把箭头函数改为普通函数，让函数内的this自动绑定到Alpine组件实例：

window._alpineSubmitObj = {
    submitDisabled : false,
    submitActivator: function(e) {
        this.submitDisabled = (e.target.value == "select");
        console.log(this.submitDisabled)
    }
}

2. 按钮上的x-bind:disabled无需额外加this，直接引用变量名即可：

<button
x-on:click.prevent="console.log(submitDisabled)"
x-bind:disabled="submitDisabled"
type="submit">Submit
</button>

修改后，下拉框切换时按钮的禁用状态会同步更新，点击按钮输出的submitDisabled也会是正确的实时值。

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