AlpineJS value unavailable in x-for

Hello,

Here is my code.

<template x-for="(field, index) in datasources[selected_datasource]['credentials_fields']" :key="'field-'+index">
    <x-ui.input type="text" :id="`datasource_credentials[${field}]`" :name="'`datasource_credentials[${field}]`">
        <span x-text="field"></span>
    </x-ui.input>
</template>

I get this error.

field is not defined

Do you have any idea why ?

Thanks for your help.

vincent15000

1 year ago

Level 63

The problem seems to come from the binding.

When I write x-bind:id="" it works, the field property is defined. But in this case, as I pass the id as a props to the component, the id is not defined inside the component.

So I have to write this.

<x-ui.input type="text" id="nomatterwhatishere" x-bind:id="`datasource_credentials[${field}]`"  :name="'`datasource_credentials[${field}]`">
        <span x-text="field"></span>
    </x-ui.input>

And now it works.

So a new question : how is it possible to use only x-bind:id and force blade to transform x-bind:id to id ?

Thanks for your help.

Please or to participate in this conversation.