当我使用 ref 到 nuxt-link 时，我无法在其上更改 styles (Nuxt.js)

Question

在我的 function 中，我使用的是绑定到链接的 ref，当我尝试更改颜色（ ref.style.color = 'red' ）时，我看到一个错误。 因为绑定到 nuxt-link 的 ref 是 Object，它没有 style 属性。 我知道我可以使用标签<a></a> ，但是有人知道如何使用nuxt-link制作它吗？

更多信息：我有一个链接

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

    Click

</nuxt-link>

在我的 function 中，我想更改链接 position，使用变换。

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

结束我在控制台中收到此消息

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

Answer 1

通过使用$refs选择nuxt-link将仅返回 Vue 组件而不是节点元素，因为nuxt-link是 Nuxt.js 中的组件。

选择节点元素的正确方法是使用$el 。

答案从这里提到。

例子：

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

值得一提的是，我不确定您要达到什么目的，但假设您想以 Vue 方式修改元素的样式，您应该使用:style="theElementStyles"然后只用this.theElementStyles = 'transform: perspective(500px);' .