5

I have a Datatable table being fed by AlpineJS:

<template x-for = "user in users": key = "user.Id">

In x-for, I have the value of user.Id that I can list in a SPAN field, with the instruction x-text:

<span id = "user.Id" class = "text-gray-700 px-6 py-3 flex items-center" x-text = "user.Id"> </span>

I need to concatenate the value of user.Id at the end of my HREF property, which will call a route on the backend to inactivate a record:

Directly, trying to set the HREF + user.Id property, it didn't work, so I thought about the following:

<script>
   var uid = document.getElementById ("user.Id");
   console.log ('uid value:' + uid.InnerText);
   var link = document.getElementById ("link");
   link.setAttribute ('href', 'http://api-paulinhomonteiro-com.umbler.net/cli/delete/<%= token%> /' + uid.innertText)
</script>

It worked very well by setting the property dynamically but the variable arrives as undefined.

How could I solve this? I just discovered AlpineJS and I can't go any further. Can someone help me?

Paulo Monteiro
  • 83
  • 1
  • 8

1 Answers1

13

To do this with Alpine you need to use x-bind:

<span 
  id = "user.Id"
  x-bind:href="'http://api-paulinhomonteiro-com.umbler.net/cli/delete/' + user.Id"
  class = "text-gray-700 px-6 py-3 flex items-center" 
  x-text = "user.Id"> </span>
Hugo
  • 3,500
  • 1
  • 14
  • 28
  • Great!!!!!! It´s so simply... @Hugo, I'm gratefull so much... I let it more simply as possible: Apagar Can you talk mora about x-bind? Can i set any property for any element by this method? AlpineJS is the great solution for small reactive aplications. I love it. – Paulo Monteiro May 20 '20 at 12:28