javascript - 连接 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>