(Updated: )
/ #alpinejs #javascript 

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:

Random image displaying with a caption and link to picsum.photos.

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

Author

Hugo Di Francesco

Co-author of "Professional JavaScript", "Front-End Development Projects with Vue.js" with Packt, "The Jest Handbook" (self-published). Hugo runs the Code with Hugo website helping over 100,000 developers every month and holds an MEng in Mathematical Computation from University College London (UCL). He has used JavaScript extensively to create scalable and performant platforms at companies such as Canon, Elsevier and (currently) Eurostar.

Interested in Alpine.js?

Subscribe to Alpine.js Weekly. A free, once–weekly email roundup of Alpine.js news and articles