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')
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 using :style="theElementStyles"
then only you update the element style with this.theElementStyles = 'transform: perspective(500px);'
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.