使用AlpineJS在循环中动态设置输入字段的名称属性

问题描述

我想使用AlpineJS在循环中设置隐藏输入字段的<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>属性。我已经尝试过name，但这没用。

我认为这是行不通的，因为待办事项的添加方式为x-bind:name：

x-model

如何使以下工作有效，以便将<input x-model="todoText" type="text"> <button x-on:click.prevent="addTodo('new',todoText)"> Add </button> 数组中的索引键设置为todos值？

todoSingle.id

更新

Codepen here。如果您添加一个待办事项，然后返回到输入字段并键入，您会看到在每个快捷键上都添加了相同的待办事项。

解决方法

您需要将x-bind:name与模板字符串一起使用：

<input type="hidden" x-bind:name="`todos[${todoSingle.id}][id]`" x-model="todoSingle.id">
<input type="hidden" x-bind:name="`todos[${todoSingle.id}][type]`" x-model="todoSingle.type">
<input type="hidden" x-bind:name="`todos[${todoSingle.id}][description]`" x-model="todoSingle.description">

请参阅固定的Codepen