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.

<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 and x-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 on Unsplash