连接 AlpineJS x-text 和 HREF 属性时出现问题

Question

我有一个由 AlpineJS 提供的数据表：

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

在 x-for 中，我可以使用 x-text 指令在 SPAN 字段中列出 user.Id 的值：

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