Alpine.js in-depth: reactive HTML attribute binding with x-bind
We’ve seen how to print out values using x-text
and toggle visibility of elements based on them with x-show
. We’ll now see how to set the value of HTML attributes using x-bind
.
In this example we’ll display and image based on data that’s in our Alpine.js initial state (as defined in x-data
), in this case caption
, src
and width
. Which, respectively, represent the images’ caption, the URL from which it’s being served and its display width on the page.
Table of Contents
<div
x-data="{
caption: 'Random image from picsum.photos',
src: 'https://picsum.photos/250/250',
width: '250'
}"
>
<figure>
<figcaption></figcaption>
</figure>
</div>
First, we’ll display an img
element and use x-bind:src="src"
, x-bind:alt="caption"
and x-bind:width="width"
to communicate to Alpine that it should set img
element’s src
to the src
field, the alt
attribute to caption
from state and width
to width
from state.
<div
x-data="{
caption: 'Random image from picsum.photos',
src: 'https://picsum.photos/250/250',
width: '250'
}"
>
<figure>
<img
x-bind:alt="caption"
x-bind:src="src"
x-bind:width="width"
/>
<figcaption></figcaption>
</figure>
</div>
We can then fill out the figcaption
with a piece of text with the caption as well as a link to the image source:
<div
x-data="{
caption: 'Random image from picsum.photos',
src: 'https://picsum.photos/250/250',
width: '250'
}"
>
<figure>
<img x-bind:width="width" x-bind:src="src" x-bind:alt="caption" />
<figcaption>
<span x-text="caption"></span> (<a x-bind:href="src" x-text="src"></a>)
</figcaption>
</figure>
</div>
In the case of the caption
inside of figcaption
we use x-text
to render out the caption
value itself (in a span
). To render the link to the image, we use an a
(anchor) tag and set x-bind:href="src"
as well as x-text="src"
.
This yields the following output:
.
Note: as opposed to
x-data
,x-text
andx-show
where it only ever makes sense to have the directive set once for each element,x-bind
can be used bind multiple different attributes on the same element.
Alpine.js x-bind attribute binding shorthand
Since attribute binding is so core to Alpine.js and developers will tend to want to bind multiple attributes on one element, Alpine provides a shorthand for the x-bind
syntax.
Instead of x-bind:attr-name="value"
we can use :attr-name="value"
.
This is inspired by the Vue.js shorthand for v-bind
.
Our previous example can be rewritten using shorthand as follows:
<div
x-data="{
caption: 'Random image from picsum.photos',
src: 'https://picsum.photos/250/250',
width: '250'
}"
>
<figure>
<img :width="width" :src="src" :alt="caption" />
<figcaption>
<span x-text="caption"></span> (<a :href="src" x-text="src"></a>)
</figcaption>
</figure>
</div>
We’ve now seen how to set HTML attributes to values from Alpine.js state using x-bind
.
You can find the examples for this post at Alpine.js Handbook Examples - 1.3 Attribute binding
That’s it for this post, you can check out the Alpine.js tag on Code with Hugo for more in-depth Alpine.js guides.
If you’re interested in Alpine.js, Subscribe to Alpine.js Weekly. A free, once–weekly email roundup of Alpine.js news and articles.
Photo by Sonny Ravesteijn
Interested in Alpine.js?
Subscribe to Alpine.js Weekly. A free, once–weekly email roundup of Alpine.js news and articles