使用ref绑定Nuxt-Link无法修改样式，求解决方案（Nuxt.js）

问题原因 #

nuxt-link是Vue封装的组件，通过ref获取到的是组件实例对象，而非直接的DOM元素，因此不存在style属性，直接访问card.style会触发TypeError。

解决方案 #

方法1：通过组件实例获取内部DOM元素 #

利用Vue组件的$el属性，获取nuxt-link渲染后对应的DOM节点（即实际的<a>标签），再修改样式：

move () {
  const card = this.$refs.card
  // 拿到组件对应的DOM元素
  const domElement = card.$el
  domElement.style.transform = 'perspective(500px)'
}

方法2：给nuxt-link内部元素绑定ref（更灵活） #

如果需要精准控制，可在nuxt-link内部嵌套元素并绑定ref：

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

然后直接操作该DOM元素：

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

方法3：使用动态class（推荐） #

更符合Vue开发规范的方式是通过动态绑定class控制样式，避免直接操作DOM：

1. 定义状态：

data() {
  return {
    isHovering: false
  }
}

2. 模板绑定class与事件：

<nuxt-link
  :class="{ 'hover-active': isHovering }"
  @mouseenter="isHovering = true"
  @mouseleave="isHovering = false">
  Click
</nuxt-link>

3. 编写对应样式：

.hover-active {
  transform: perspective(500px);
  /* 其他需要的样式 */
}

内容的提问来源于stack exchange，提问作者Volodymyr Bondarenko