Dynamically assigning a value for x-target not working, but works if assigning it statically.

[cocomansur]

I've recently using Alpine-Ajax, and it's awesome, so thank you!

When dynamically setting the value for ":x-target" it does not work, it navigates me to the page that is supposed to be loaded into x-target. but if setting the "x-target" statically it does work. Maybe I'm doing something wrong?

settings :x-target dynamically (not working)

<template x-for="(note, index) in filenotes" :key="index">
<div>
<div :id="'note'+index"><p x-text="note.filenotes"></p></div>
<div><a :href="'filenotes-edit/'+info.profile.id" :x-target="'note'+index">edit</a></div>
</div>
</template>

settings x-target statically (working)

<template x-for="(note, index) in filenotes" :key="index">
<div>
<div :id="'note'+index"><p x-text="note.filenotes"></p></div>
<div><a :href="'filenotes-edit/'+info.profile.id" x-target="note0">edit</a></div>
</div>
</template>

[Christian Taylor]

Thanks for reporting this. I’m close to rolling out a fix, shooting for a release at the end of this week.

[Christian Taylor]

Ah, you have a sneaky syntax error in the first code snippet, x-target is a directive so you have to drop the : prefix (just like x-text), this should work:

<template x-for="(note, index) in filenotes" :key="index">
<div>
<div :id="'note'+index"><p x-text="note.filenotes"></p></div>
<div><a :href="'filenotes-edit/'+info.profile.id" x-target="'note'+index">edit</a></div>
</div>
</template>

This won't fix everything yet, there's still an issue with dynamically evaluating x-target, but I'm working on that fix right now and the code above should work on the next release.

[Christian Taylor]

You can x-target:dynamic in v0.6.0 now:

<template x-for="(note, index) in filenotes" :key="index">
<div>
<div :id="'note'+index"><p x-text="note.filenotes"></p></div>
<div><a :href="'filenotes-edit/'+info.profile.id" x-target:dynamic="'note'+index">edit</a></div>
</div>
</template>

[cocomansur]

Awesome! Thanks @imacrayon