$refs and the Vue 3 Composition API

If you’re used to working with Vue 2 $refs and switch to the Vue 3 Composition API, you might wonder how to use $refs inside the new setup() method. In this article, we find out how to use the new ref() function as a replacement for static and dynamic HTML element references.

Static $refs

When using the Vue 3 Composition API via the setup() method, we don’t have access to this.$refs, rather, we can use the new ref() function for the same result.

<script>
import { onMounted, ref } from "vue";

export default {
  setup() {
    const headline = ref(null);

    // Before the component is mounted, the value
    // of the ref is `null` which is the default
    // value we've specified above.
    onMounted(() => {
      // Logs: `Headline`
      console.log(headline.value.textContent);
    });

    return {
      // It is important to return the ref,
      // otherwise it won't work.
      headline,
    };
  },
};
</script>

<template>
  <div>
    <h1 ref="headline">Headline</h1>
    <p>Lorem ipsum ...</p>
  </div>
</template>

---

Looking for a Vue.js job?

at ·

at ·

at ·

---

Dynamic $refs in v-for

You might wonder how this can work with dynamic references. Luckily after a short chat with Carlos Rodrigues, I knew the answer (the information is also in the official API documentation, but I somehow missed it).

<template>
  <div
    v-for="(item, i) in list"
    :ref="
      (el) => {
        divs[i] = el;
      }
    "
  >
    {{ item }}
  </div>
</template>

<script>
import { onBeforeUpdate, reactive, ref } from "vue";

export default {
  setup() {
    const list = reactive([1, 2, 3]);
    const divs = ref([]);

    // Make sure to reset the refs before each update.
    onBeforeUpdate(() => {
      divs.value = [];
    });

    return {
      list,
      divs,
    };
  },
};
</script>

Above you can see the example für dynamic Vue Composition API $refs from the official documentation.

Wrapping it up

Although at first, I didn’t like the new $refs API very much, it gets the job done. I think it’s only a matter of time until we get used to the new way of doing things with the Composition API.