alpine.js

Question

我正在尝试使用 alpine.js 来更新表单的操作，但运行陷入了一些困惑。

我的代码：

<div x-data="data=''">
    <template x-if="data.url">
        <div>
            <form method=POST :action="data.url">
                <input type="text" x-model="data.sitenumber">
                <button type="submit">Submit form</button>
            </form>
        </div>
    </template>
    <input type="button" value="add data" @click="data = {url: 'www.com', sitenumber: 23}">
</div>

当我点击按钮时，div 表单没有出现。我的最终目标是当单击文档中其他地方的 link/button 时，使用操作按钮（删除记录等）动态更新的模式弹出窗口。

我尝试使用此 ToDo app tutorial 进行长时间跟踪，但这会创建一个单独的函数，我认为可以将简单的数据变量传递到 div 的不同部分，尤其是因为我没有遍历数组。

谢谢！

Answer 1

我认为问题在于您使用 x-data="data=''" 而不是使用对象初始化语法：x-data="{ data: '' }"

alpine.js - 使用按钮填充表单数据

alpine.js - populating form data with button

javascript