When i use ref to nuxt-link, i can't change styles on it (Nuxt.js)-CodePudding

In my function I am using ref, which is binded to link, and when I try to change color (ref.style.color = 'red'), I see a error. Because ref which is binded to nuxt-link is Object, and it hasn't style property. I know that I can use the tag <a></a>, but does someone has ideas how can i make it with nuxt-link?

More info: I have a link

<nuxt-link
    ref="card"
    @mousemove.native="move"
    @mouseleave.native="leave"
    @mouseover.native="over">

    Click

</nuxt-link>

In my function i want to change link position, useng transform.

move () {
      const card = this.$refs.card
      card.style.transform = `perspective(500px)`
    }

End i get this message in console

TypeError: Cannot set properties of undefined (setting 'transform')

CodePudding user response：

By selecting nuxt-link using $refs will only return Vue Component instead of node element due to nuxt-link is a component in Nuxt.js.

The correct way to selecting node element is using $el.

Answer referred from here.

Example:

const card = this.$refs.card.$el
card.style.transform = `perspective(500px)`

To be mentioned, I'm not sure what you trying to achieve but assuming you want to modify the style of an element in Vue way, you are supposed to use :style="theElementStyles" then only you update the element style with this.theElementStyles = { transform: 'perspective(500px)' }.

More details about inline style binding can check on Vue documentation.