连接 AlpineJS x-text 和 HREF 属性的问题

Question

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

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

在 x-for 中，我有 user.Id 的值，可以在 SPAN 字段中列出，并带有指令 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>