Dynamically set name attribute of input field in loop with AlpineJS

Question

I'd like to set the name attribute of hidden input fields in a loop with AlpineJS. I've tried x-bind:name but that doesn't work.

I think this doesn't work because of the x-model in how todos are added:

<input x-model="todoText" type="text">

<button x-on:click.prevent="addTodo('new', todoText)">
    Add
</button>

How can I make the below work so that the index key in the todos array is set to the todoSingle.id value?

<template x-for="todoSingle in todoArray" :key="todoSingle.id">
    <input type="hidden" name="todos[todoSingle.id][id]" x-model="todoSingle.id">
    <input type="hidden" name="todos[todoSingle.id][type]" x-model="todoSingle.type">
    <input type="hidden" name="todos[todoSingle.id][description]" x-model="todoSingle.description">
</template>

Update

Codepen here. If you add a todo, then go back to the input field and type, you'll see that on every keyup the same todo is added.

Hugo · Accepted Answer · 2020-08-25 10:30:05Z

8

You need to use x-bind:name with a template string:

<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">

See the fixed Codepen

edited Aug 25, 2020 at 10:30

answered Aug 25, 2020 at 8:53

Hugo

3,9381 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

eskimo Over a year ago

As indicated in the original question x-bind:name doesn't work. What happens is that on every keyup in the input field the todo is added. I've added the input field and the button that adds the todo in my question.

eskimo Over a year ago

I also get Can't find variable todoSingle and Can't find variable todos

Hugo Over a year ago

Do you have this running in a codepen? Or the full component code

eskimo Over a year ago

I'll create one, just a few minutes

Hugo Over a year ago

Answer updated and have forked the codepen to a working state codepen.io/hugodf/pen/xxVqOeb

|

Collectives™ on Stack Overflow

Dynamically set name attribute of input field in loop with AlpineJS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related