连接AlpineJS x文本和HREF属性的问题

Question

我有一个由AlpineJS提供的Datatable表：

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

在x-for中，我具有可以在SPAN字段中列出的user.Id的值，并带有x-text指令：

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

我需要在HREF属性的末尾连接user.Id的值，这将在后端调用路由以使记录无效：

直接，试图设置HREF + user.Id属性，它不起作用，所以我考虑了以下问题：

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

通过动态设置属性效果很好，但是变量未定义。

我该如何解决？我只是发现了AlpineJS，就再也不能了。有人可以帮我吗？

Answer 1

要对Alpine执行此操作，您需要使用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>

Answer 2

太好了！！！就这么简单...

@@雨果，我非常感激...

我让它更简单：

<td class="border-dashed border-t border-gray-200 Acao"> <a x-bind:href="'api-paulinhomonteiro-com.umbler.net/cli/delete/<%=token%>' + user.Id">Apagar </a> </td>

您能谈谈关于x绑定的吗？我可以通过此方法为任何元素设置任何属性吗？ AlpineJS是小型反应式应用的绝佳解决方案。我喜欢它。