Need help with x-bind:href #4162

huylv · 2024-04-20T21:39:27Z

huylv
Apr 20, 2024

x-bind:href does not seem to work for me? I have a super simple <a/> element as follows and it is not displayed as a hyperlink (not even clickable) somehow:

<a x-bind:href="https://example.com">Click me!</a>

Am I doing something wrong?

Answered by huylv

Apr 22, 2024

Oh, never mind. I change the <script/> tag to

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

and it works. Sorry, I really appreciate your help.

View full answer

ekwoka · 2024-04-20T23:45:10Z

ekwoka
Apr 20, 2024

Is that the full code?

Does a parent element have an x-data attribute?

5 replies

huylv Apr 21, 2024
Author

Here is the full HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
  <div x-data="{ url: 'https://example.com' }">
      <a x-bind:href="url">Click me!</a>
  </div>
</body>
</html>

ekwoka Apr 22, 2024

https://awesomealpine.com/play/?coreplugins=0&html=PGRpdiB4LWRhdGE9InsgdXJsOiAnaHR0cHM6Ly9leGFtcGxlLmNvbScgfSI-CiAgPGEgeC1iaW5kOmhyZWY9InVybCI-Q2xpY2sgbWUhPC9hPgo8L2Rpdj4K&script=Y29uc29sZS5sb2coJ2hlbGxvJyk7Cg

That totallly works, so I'm not sure what issue you're having.

huylv Apr 22, 2024
Author

I put your code in an HTML file, this is how it is shown:

As you can see, the text in the browser is just plain text, not clickable at all. I tried on Chrome, Safari on Linux and macOS, same result.

huylv Apr 22, 2024
Author

Oh, never mind. I change the <script/> tag to

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

and it works. Sorry, I really appreciate your help.

Answer selected by huylv

SimoTod Apr 22, 2024
Collaborator

FYI you can't use // when developing from a file, as it generates a protocol relative URL. You need to explicitly put the protocol https://unpkg.com/alpinejs" but nevertheless cdn.jsdelivr.net is a better CDN than unpkg.com

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Need help with x-bind:href #4162

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 5 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Need help with x-bind:href #4162

Uh oh!

huylv Apr 20, 2024

Replies: 1 comment · 5 replies

Uh oh!

ekwoka Apr 20, 2024

Uh oh!

huylv Apr 21, 2024 Author

Uh oh!

ekwoka Apr 22, 2024

Uh oh!

Uh oh!

huylv Apr 22, 2024 Author

Uh oh!

huylv Apr 22, 2024 Author

Uh oh!

SimoTod Apr 22, 2024 Collaborator

huylv
Apr 20, 2024

Replies: 1 comment 5 replies

ekwoka
Apr 20, 2024

huylv Apr 21, 2024
Author

huylv Apr 22, 2024
Author

huylv Apr 22, 2024
Author

SimoTod Apr 22, 2024
Collaborator