Unlocking $refs with the Composition API in Vue3 - A step-by-step guide

Question

Unlocking $refs with the Composition API in Vue3 - A step-by-step guide

I am currently exploring how to access $refs in Vue 3 using the Composition API. In my template, I have two child components and I specifically need to obtain a reference to one of them:

<template>
    <comp-foo />
    <comp-bar ref="table"/>
</template>

When working with Template Refs, the ref attribute is crucial as it allows us to directly access a specific DOM element or child component instance once it has been mounted.

In my code, everything works perfectly fine when utilizing the Options API:

  mounted() {
    console.log("Mounted - ok");
    console.log(this.$refs.table.temp());
  }

However, when attempting to achieve the same result using the Composition API, I encounter an error:

setup() {
    const that: any = getCurrentInstance();
    onMounted(() => {
      console.log("Mounted - ok");
      console.log(that.$refs.table.temp());//ERROR that.$refs is undefined
    });
    return {};
  }

If anyone can provide guidance on how to achieve this using the Composition API, it would be greatly appreciated.

javascript typescript vue.js vuejs3

Answer 1

Answer №1

To access the table element in the html, you must first create the ref constant inside the setup function and then return it.

<template>
    <div ref="table"/>
</template>

import { ref, onMounted } from 'vue';

setup() {
    const tableRef = ref(null);

    onMounted(() => {
      console.log(tableRef.value);
    });

    return { tableRef };
}

Answer 2

To access the table element in the html, you must first create the ref constant inside the setup function and then return it.

<template>
    <div ref="table"/>
</template>

import { ref, onMounted } from 'vue';

setup() {
    const tableRef = ref(null);

    onMounted(() => {
      console.log(tableRef.value);
    });

    return { tableRef };
}

Answer 3

Answer №2

Working with Laravel Inertia:

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

// a test list
let items = [
  { id: 1, name: "item name 1" },
  { id: 2, name: "item name 2" },
  { id: 3, name: "item name 3" },
];

// referencing elements
let elements = ref(null);

// testing
onMounted(() => {
    
  let all = elements.value;
  let item1 = all[0];
  let item2 = all[1];
  let item3 = all[2];

  console.log([all, item1, item2, item3]);

});
</script>
<template>
  <div>

    <!-- elements -->
    <div v-for="(item, i) in items" ref="elements" :key="item.id">

      <!-- element's content -->
      <div>ID: {{ item.id }}</div>
      <div>Name: {{ item.name }}</div>

    </div>

  </div>
</template>

Answer 4

Working with Laravel Inertia:

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

// a test list
let items = [
  { id: 1, name: "item name 1" },
  { id: 2, name: "item name 2" },
  { id: 3, name: "item name 3" },
];

// referencing elements
let elements = ref(null);

// testing
onMounted(() => {
    
  let all = elements.value;
  let item1 = all[0];
  let item2 = all[1];
  let item3 = all[2];

  console.log([all, item1, item2, item3]);

});
</script>
<template>
  <div>

    <!-- elements -->
    <div v-for="(item, i) in items" ref="elements" :key="item.id">

      <!-- element's content -->
      <div>ID: {{ item.id }}</div>
      <div>Name: {{ item.name }}</div>

    </div>

  </div>
</template>

Answer 5

Answer №3

<template>
    <custom-table ref="table"/>
    ...
</template>

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

setup() {
    const table = ref(null);

    onMounted(() => {
      table.value.addEventListener('click', () => console.log("Event occurred"))
    });

    return { table };
}
</script>

Within another component, you can interact with events that were registered on the onMounted lifecycle hook. In my example, I have only registered one event.

Answer 6

<template>
    <custom-table ref="table"/>
    ...
</template>

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

setup() {
    const table = ref(null);

    onMounted(() => {
      table.value.addEventListener('click', () => console.log("Event occurred"))
    });

    return { table };
}
</script>

Within another component, you can interact with events that were registered on the onMounted lifecycle hook. In my example, I have only registered one event.

Answer 7

Answer №4

If desired, you have the option to utilize getCurrentInstance() within the parent component as demonstrated in the following code snippet:

<template>
    <MyCompo ref="table"></MyCompo>
</template>

<script>
import MyCompo from "@/components/MyCompo.vue"
import { ref, onMounted, getCurrentInstance } from 'vue'
export default {
    components : {
        MyCompo
    },
    
    setup(props, ctx) {
        
        onMounted(() => {
          getCurrentInstance().ctx.$refs.table.tempMethod()
           
        });
    }
}
</script>

Below is the code for the child component (referred to as MyCompo):

<template>
    <h1>this is MyCompo component</h1>
</template>

<script>
export default {
    
    setup(props, ctx) {
        
        const tempMethod = () => {
            console.log("temporary method");
        }

        return {
            tempMethod
        }
    },
}
</script>

Answer 8

If desired, you have the option to utilize getCurrentInstance() within the parent component as demonstrated in the following code snippet:

<template>
    <MyCompo ref="table"></MyCompo>
</template>

<script>
import MyCompo from "@/components/MyCompo.vue"
import { ref, onMounted, getCurrentInstance } from 'vue'
export default {
    components : {
        MyCompo
    },
    
    setup(props, ctx) {
        
        onMounted(() => {
          getCurrentInstance().ctx.$refs.table.tempMethod()
           
        });
    }
}
</script>

Below is the code for the child component (referred to as MyCompo):

<template>
    <h1>this is MyCompo component</h1>
</template>

<script>
export default {
    
    setup(props, ctx) {
        
        const tempMethod = () => {
            console.log("temporary method");
        }

        return {
            tempMethod
        }
    },
}
</script>

Answer 9

Answer №5

If you're working with Vue 3 and the composition API, utilizing Template Ref allows for this functionality.

After the initial render, you can access the DOM since script setup runs before DOM creation. By using the onMounted hook, you can target elements accordingly.

For further information on template Ref, check out this informative blog post: https://medium.com/@plabonislam/how-to-access-dom-element-using-vue-3-compostion-api-2181d69abee6


<script setup>
 import { onMounted, ref } from "vue";
 const headline=ref(null);
 onMounted(()=>{
 console.log(headline.value) 
 
 }
</script>

<template>
 <h1 ref="headline"> hello world </h1>
</template>

Answer 10

If you're working with Vue 3 and the composition API, utilizing Template Ref allows for this functionality.

After the initial render, you can access the DOM since script setup runs before DOM creation. By using the onMounted hook, you can target elements accordingly.

For further information on template Ref, check out this informative blog post: https://medium.com/@plabonislam/how-to-access-dom-element-using-vue-3-compostion-api-2181d69abee6


<script setup>
 import { onMounted, ref } from "vue";
 const headline=ref(null);
 onMounted(()=>{
 console.log(headline.value) 
 
 }
</script>

<template>
 <h1 ref="headline"> hello world </h1>
</template>

Answer 11

Answer №6

In my experience, I encountered an issue where the ref variable was not binding to the component due to it not being rendered yet. To address this, I will be expanding upon @dantheman's solution. Take a look at the following example:

<template>
    <div v-if="false">
        <div ref="table"/>
    </div>
</template>

import { ref, onMounted } from 'vue';

setup() {
    const table = ref(null);

    onMounted(() => {
      console.log(table.value);
    });

    return { table };
}

In the above scenario, where the

<div ref="table"/>

is not rendered due to the condition, the const table remains as null. If the condition were to change from false to true, then the const table would be assigned a value. This behavior is also explicitly mentioned in the Vue.js documentation here:

Keep in mind that you can only access the ref after the component has been mounted. If you attempt to access the input in a template expression, it will be null during the initial render because the element does not exist until after the first render!

Therefore, it is crucial to not only consider the onMounted hook but also ensure that the component to which the ref is linked has been successfully mounted.

Answer 12

In my experience, I encountered an issue where the ref variable was not binding to the component due to it not being rendered yet. To address this, I will be expanding upon @dantheman's solution. Take a look at the following example:

<template>
    <div v-if="false">
        <div ref="table"/>
    </div>
</template>

import { ref, onMounted } from 'vue';

setup() {
    const table = ref(null);

    onMounted(() => {
      console.log(table.value);
    });

    return { table };
}

In the above scenario, where the

<div ref="table"/>

is not rendered due to the condition, the const table remains as null. If the condition were to change from false to true, then the const table would be assigned a value. This behavior is also explicitly mentioned in the Vue.js documentation here:

Keep in mind that you can only access the ref after the component has been mounted. If you attempt to access the input in a template expression, it will be null during the initial render because the element does not exist until after the first render!

Therefore, it is crucial to not only consider the onMounted hook but also ensure that the component to which the ref is linked has been successfully mounted.

Answer 13

Answer №7

Perhaps using TypeScript could simplify this task. I found success with the following code:

const tableRef = ref<HTMLDivElement | null>(null);

Answer 14

Perhaps using TypeScript could simplify this task. I found success with the following code:

const tableRef = ref<HTMLDivElement | null>(null);

Answer 15

Answer №8

When dealing with refs in an array, a previous answer mentioned the issue of logging an empty refs array in Vue versions between 3.2.25 and 3.2.31:

const {ref, onMounted} = Vue;

Vue.createApp({
  setup() {
    const items = [
      {id: 1, name: "item name 1"},
      {id: 2, name: "item name 2"},
      {id: 3, name: "item name 3"},
    ];
    const elements = ref([]);
    onMounted(() => {
      console.log(
        elements.value.map(el => el.textContent)
      );
    });
    return {elements, items};
  }
}).mount("#app");

<div id="app">
  <div v-for="(item, i) in items" ref="elements" :key="item.id">
    <div>ID: {{item.id}}</div>
    <div>Name: {{item.name}}</div>
  </div>
</div>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f696a7a5f2c312d31505b505d32">[email protected]</a>/dist/vue.global.prod.js"></script>

To solve this issue, replacing refs="elements" with

:ref="el => elements[i] = el"

can be used as a workaround:

const {ref, onMounted} = Vue;

Vue.createApp({
  setup() {
    const items = [
      {id: 1, name: "item name 1"},
      {id: 2, name: "item name 2"},
      {id: 3, name: "item name 3"},
    ];
    const elements = ref([]);
    onMounted(() => {
      console.log(
        elements.value.map(el => el.textContent)
      );
    });
    return {elements, items};
  }
}).mount("#app");

<div id="app">
  <div v-for="(item, i) in items"
       :ref="el => elements[i] = el"
       :key="item.id">
    <div>ID: {{item.id}}</div>
    <div>Name: {{item.name}}</div>
  </div>
</div>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3959686a3d0cdd1cddadf4843444bd8">[email protected]</a>/dist/vue.global.prod.js"></script>

Answer 16

When dealing with refs in an array, a previous answer mentioned the issue of logging an empty refs array in Vue versions between 3.2.25 and 3.2.31:

const {ref, onMounted} = Vue;

Vue.createApp({
  setup() {
    const items = [
      {id: 1, name: "item name 1"},
      {id: 2, name: "item name 2"},
      {id: 3, name: "item name 3"},
    ];
    const elements = ref([]);
    onMounted(() => {
      console.log(
        elements.value.map(el => el.textContent)
      );
    });
    return {elements, items};
  }
}).mount("#app");

<div id="app">
  <div v-for="(item, i) in items" ref="elements" :key="item.id">
    <div>ID: {{item.id}}</div>
    <div>Name: {{item.name}}</div>
  </div>
</div>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f696a7a5f2c312d31505b505d32">[email protected]</a>/dist/vue.global.prod.js"></script>

To solve this issue, replacing refs="elements" with

:ref="el => elements[i] = el"

can be used as a workaround:

const {ref, onMounted} = Vue;

Vue.createApp({
  setup() {
    const items = [
      {id: 1, name: "item name 1"},
      {id: 2, name: "item name 2"},
      {id: 3, name: "item name 3"},
    ];
    const elements = ref([]);
    onMounted(() => {
      console.log(
        elements.value.map(el => el.textContent)
      );
    });
    return {elements, items};
  }
}).mount("#app");

<div id="app">
  <div v-for="(item, i) in items"
       :ref="el => elements[i] = el"
       :key="item.id">
    <div>ID: {{item.id}}</div>
    <div>Name: {{item.name}}</div>
  </div>
</div>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3959686a3d0cdd1cddadf4843444bd8">[email protected]</a>/dist/vue.global.prod.js"></script>

Answer 17

Answer №9

When utilizing the defineComponent method that is Typescript compatible, you have the option to delegate the required code to a function that does have access to this.$refs:

export default defineComponent({
  name: 'ModeBar',
  methods: {
    registerToolTips(): boolean {
      //this.$refs is available!!!
    },
  },
  mounted() {
    this.$nextTick(() => this.registerToolTips());
  },
});

It's important to note that using this.$nextTick() may not always be necessary and might not suffice in some cases. There is no guarantee that all elements will be fully rendered on mounted. If the desired $refs are not yet rendered, you may need to implement an interval within the mounted function until they become available, then deactivate it once they are located;

This explains why the registerToolTips function returns a boolean - to allow for retrying if initial execution fails.

Answer 18

When utilizing the defineComponent method that is Typescript compatible, you have the option to delegate the required code to a function that does have access to this.$refs:

export default defineComponent({
  name: 'ModeBar',
  methods: {
    registerToolTips(): boolean {
      //this.$refs is available!!!
    },
  },
  mounted() {
    this.$nextTick(() => this.registerToolTips());
  },
});

It's important to note that using this.$nextTick() may not always be necessary and might not suffice in some cases. There is no guarantee that all elements will be fully rendered on mounted. If the desired $refs are not yet rendered, you may need to implement an interval within the mounted function until they become available, then deactivate it once they are located;

This explains why the registerToolTips function returns a boolean - to allow for retrying if initial execution fails.

Unlocking $refs with the Composition API in Vue3 - A step-by-step guide

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Saving a JSON object to a .json file using JavaScript

A neutral-toned backdrop that briefly shows up for a quick 7-second interlude during a background-image

How can you set a predetermined value for a dropdown menu after populating it with data from a Django database?

Does React trigger a re-render when setState is called even if the state value remains unchanged?

Unauthorized access for POST request in WooCommerce API: 401 error

In-line Vertical Ticker Display

Concealing Panels within EasyUi Tab Navigation

React does not automatically re-render components created with the built-in function

A comprehensive guide on properly obtaining user details in React with Redux and OIDC

Trouble with executing asynchronous AJAX request using when() and then() functions

How come the likes are not being refreshed when the button is clicked in my mongoose schema?

The intersection of conditional types and the combination of string literals with class unions

Having trouble accessing req.user on my Node.js server using Auth0 and Angular

Encounter a scope.router.go error when using Vue.js with System.js

The backend function of an aspx page is failing to execute when triggered by a $.ajax request

What is the best way to retrieve a URL from a function in an HTML/JavaScript environment?

Is it not possible to apply the .includes method on a string within a v-if directive while utilizing a computed property?

"Experiencing sluggish performance with VSCode while using TypeScript and Styled Components

In Javascript, have an audio clip play every 30 seconds

Is utilizing a standardized logging system considered a best practice for a node and express application?