Trying to replace getElementByID with refs in vue 3 won't work

Question

What I'm Trying to do

I am new to Vue and I'm trying to replace getElementByID with $refs, but I get the following error:

Errors

Code

Here is the HTML:

<router-link to="/" ref="navOpt">
    <div ref="activeOpt">

Here is the script:

// imports
import { ref, onMounted } from "vue";

// setup
setup() {
  let navOpt = ref();
  let activeOpt = ref();
  onMounted(() => this.$refs.navOpt);
  onMounted(() => this.$refs.activeOpt);
  return { navOpt, activeOpt };
},

// Methods - check if the navOpt is active and removes css if it is
checkActiveRoute() {
  if (this.navOpt.classList.contains("router-link-active")) {
    this.activeOpt.classList.remove("hide-active");
  }
},

// Created - call method on load
created() {
  this.checkActiveRoute();
},

Tried Solutions

I have tried this but it gave me the same error.

Can someone help with this? Thanks!

Boussadjra Brahim · Accepted Answer · 2022-08-29 11:33:54Z

1

ref values are automatically bound to the ref attribute in your elements, and there's no need to do onMounted(() => this.$refs.navOpt) since this doesn't have any effect, you should also use only one API (composition or options), but it's recommended to use the composition API, finally define the method just a function which should be called in the onMounted hook :

setup() {
  let navOpt = ref();
  let activeOpt = ref();
  onMounted(() => {
     checkActiveRoute()
   });

function checkActiveRoute() {
  if (navOpt.value.classList.contains("router-link-active")) {
        activeOpt.value.classList.remove("hide-active");
  }
}
  return { navOpt, activeOpt };
},

answered Aug 29, 2022 at 11:33

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trying to replace getElementByID with refs in vue 3 won't work

What I'm Trying to do

Errors

Code

Tried Solutions

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I'm Trying to do

Errors

Code

Tried Solutions

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related