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

Question

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

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

在x-for中，我有用户的价值。我可以在 SPAN 字段中列出的 ID，说明 x 文本：

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

我需要连接用户的价值。ID 位于我的 HREF 属性的末尾，它将调用后端上的路由以停用记录：

直接，尝试设置 HREF + 用户。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&nbsp; &nbsp;&nbsp;id&nbsp;=&nbsp;"user.Id" &nbsp;&nbsp;x-bind:href="'http://api-paulinhomonteiro-com.umbler.net/cli/delete/'&nbsp;+&nbsp;user.Id" &nbsp;&nbsp;class&nbsp;=&nbsp;"text-gray-700&nbsp;px-6&nbsp;py-3&nbsp;flex&nbsp;items-center"&nbsp; &nbsp;&nbsp;x-text&nbsp;=&nbsp;"user.Id">&nbsp;</span>