How to define the HREF property of HTML dynamically, with Alpine.js?

Question

I have a Datatable table being powered by Alpinejs:

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

On x-for, I have the user.id value that I can list in a SPAN field, with the x-text instruction:

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

I need to concatenate the user value. Id at the end of my HREF property, which will call a route in the backend for inactivation of a record:

Directly, trying to define the HREF + user.id property, it didn’t work, so I thought the following:

<script>                                    
   var uid = document.getElementById("user.Id");
   console.log('Valor de uid: ' + uid.InnerText);
   var link = document.getElementById("link");
   link.setAttribute('href', 'http://api-paulinhomonteiro-com.umbler.net/cli/delete/<%= token %>/' + uid.innertText)
</script>

It worked very well setting the property dynamically but the variable arrives as Undefined.

How could I solve this? I just discovered Alpinejs and I can’t move on.

P.S. Dear friends, despite the great help of friend #Leandrade, I still can not solve. The point is: how to use the contents of the x-text variable, concatenated with HREF?

Answer 1

I believe the author has already found the answer as he himself commented, yet yes to formulate the answer aiming to help future visitors. Before answering, for those who have doubts where to find the documentation of Alpine.js, it is directly on their github and is also available in English:

• https://github.com/alpinejs/alpine/blob/master/README.pt.md#learn how

The x-bind is that allows an attribute in an element to receive the value of a Javascript expression, leaving something like:

<a x-bind:href="'foo/bar/delete/<%=token%>' + user.Id">Apagar</a>

However it is worth remembering that the syntax x-bind:atributo= has a shortcut being just :atributo= and that could be done just like that:

<a :href="'foo/bar/delete/<%=token%>' + user.Id">Apagar</a>

Example (hover over the link and see that the "ID" changes every second:

function myData()
{
    return {
        user: null,
        fetchData() {
            let randomID = 0;
            setInterval(() => {
                this.user = { "id": ++randomID };
            }, 1000);
        }
    }
}

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2/dist/alpine.min.js" defer></script>

<div x-data="myData()" x-init="fetchData()">
    <template x-if="user">
        <a :href="`#foobar=${user.id}`">link com :href</a><br>
        <a :href="`#foobar=${user.id}`">link com x-bind:href</a>
    </template>
</div>

Other "features" to use with your template elements:

Directive	Description
x-data	Declares a new component scope
x-init	Executes an expression when a component is initialized
x-show	Alternate display: none; element depending on expression (true or false)
x-bind	Sets the value of an attribute for the result of a JS expression
x-on	Attaches a listening event to the element. Executes the JS expression when issued
x-model	Adds "bidirectional data connection" to an element. Keeps the input element synchronized with component data
x-text	It works the same way as x-bind, but updates the innerText of a single element
x-html	Works in a similar way to x-bind, but updates the innerHTML of a single element
x-ref	Convenient way to retrieve DOM elements out of your component
x-if	Removes an element completely in the DOM. You need to use a tag <template>
x-for	Create new DOM nodes for each item in an array. You need to use a tag <template>
x-transition	Guidelines for applying classes to multi-stage transition of an element
x-spread	Allows defining an object of Alpine directives, to an element for better reuse
x-cloak	This attribute is removed when Alpine is initialized. Useful for hiding DOM pre-initialization