Alpine JS组件逻辑提取问题：Todo应用自定义函数失效

问题出在自定义函数里没有用this访问组件属性。

在Alpine JS的组件方法中，必须通过this关键字来访问组件的响应式属性。你直接写myArray.push(newTask)时，JS会把这两个变量当成全局变量（但全局里根本没有），所以逻辑执行失败。而直接在@keyup.enter事件里写代码时，Alpine自动帮你绑定了上下文，所以能直接用属性名。

修正后的代码如下：

<div x-data="{myArray:[], newTask: '', add_newTask() {this.myArray.push(this.newTask); this.newTask = '';}}">
    New task: 
    <input type="text" x-model="newTask" @keyup.enter="add_newTask()">
</div>

只要在方法里的属性前加上this.，就能正确访问组件的响应式数据，功能就恢复正常了。

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