Categories
Vue Answers

How to fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript?

Spread the love

Sometimes, we want to fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript.

In this article, we’ll look at how to fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript.

How to fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript?

To fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript, we can use the ref function from the composition API.

For instance, we write

<template>
  <div ref="root">This is a root element</div>
</template>

<script lang="ts">
import { ref, onMounted, defineComponent } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const root = ref(null);

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

    return {
      root,
    };
  },
});
</script>

to call ref to create the root ref.

And then we set the ref prop to root to assign the div to the root ref.

Then we get the div from root.value.

Conclusion

To fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript, we can use the ref function from the composition API.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.