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 表单。我的最终目标是在单击文档中其他位置的链接/按钮时使用操作按钮（删除记录等）动态更新模式弹出窗口。

我尝试长时间关注这个ToDo app tutorial，但这会创建一个单独的函数，我认为可以将简单的数据变量传递到 div 的不同部分，特别是因为我没有循环遍历数组.

谢谢！

Answer 1

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