[英]When i use ref to nuxt-link, i can't change styles on it (Nuxt.js)
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.在我的 function 中,我使用的是绑定到链接的 ref,当我尝试更改颜色(
ref.style.color = 'red'
)时,我看到一个错误。 Because ref which is binded to nuxt-link is Object, and it hasn't style property.因为绑定到 nuxt-link 的 ref 是 Object,它没有 style 属性。 I know that I can use the tag
<a></a>
, but does someone has ideas how can i make it with nuxt-link
?我知道我可以使用标签
<a></a>
,但是有人知道如何使用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.在我的 function 中,我想更改链接 position,使用变换。
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.通过使用
$refs
选择nuxt-link
将仅返回 Vue 组件而不是节点元素,因为nuxt-link
是 Nuxt.js 中的组件。
The correct way to selecting node element is using $el
.选择节点元素的正确方法是使用
$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);'
值得一提的是,我不确定您要达到什么目的,但假设您想以 Vue 方式修改元素的样式,您应该使用
:style="theElementStyles"
然后只用this.theElementStyles = 'transform: perspective(500px);'
. .
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.