Alpine JS-提取组件逻辑问题

Question

我正在为一个ToDo应用程序而苦苦挣扎，我正在从头开始编码(为了学习Alpine(。

如果我写这篇文章，它会起作用：

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

但如果我试图以这种方式提取@keyup.enter函数，它就不起作用：

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

我做错了什么？

Answer 1

当您将add_newTask()方法放入x-data指令时，您正在创建Alpine.js组件(与Alpine.data()类似(。在组件内部，您必须使用this.前缀来访问组件的数据，例如this.myArray:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<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 x-show="myArray.length">
<h2>Tasks</h2>
<ul>
<template x-for="task in myArray">
<li :key="task" x-text="task"></li>
</template>
</ul>
</div>
</div>