将jQuery代码转为Vue时遇TypeError及$this输出异常求助

首先咱们先搞定核心的元素获取差异问题——你说Vue里输出的是<img>而不是预期的<a>，这其实是事件绑定中target和currentTarget的区别导致的：

在jQuery中，当你把点击事件绑定在<a>上时，$(this)指向的是绑定事件的<a>元素；但在Vue中，如果你的点击事件绑在<a>上，而实际点击的是内部的<img>，$event.target会返回触发事件的子元素<img>，这就是输出不符合预期的原因。

第一步：正确获取<a>元素 #

这里有两种可靠的方式：

方式1：使用event.currentTarget获取绑定事件的元素

把事件绑定在<a>上，在方法里用currentTarget代替target，它始终指向绑定事件的那个元素（也就是<a>）：

<template>
  <a @click="handleLinkClick" href="javascript:void(0)">
    <img src="your-image.jpg" alt="图片描述">
  </a>
</template>

<script>
export default {
  methods: {
    handleLinkClick(event) {
      // 这里拿到的就是你要的<a> DOM元素
      const linkElement = event.currentTarget;
      console.log(linkElement); // 现在输出应该是<a>，和jQuery的$(this)[0]一致
      
      // 接下来调用getClientRects就不会报错了
      const rects = linkElement.getClientRects();
      // 你的后续业务逻辑...
    }
  }
}
</script>

方式2：用Vue的ref标记元素

如果需要在非事件场景下获取<a>，或者想更直接地引用元素，可以给<a>加个ref属性：

<template>
  <a ref="targetLink" href="javascript:void(0)">
    <img src="your-image.jpg" alt="图片描述">
  </a>
</template>

<script>
export default {
  mounted() {
    // 组件挂载后才能获取到ref对应的DOM元素
    const linkElement = this.$refs.targetLink;
    console.log(linkElement); // 输出<a>元素
    
    const rects = linkElement.getClientRects();
    // 处理逻辑...
  },
  methods: {
    handleLinkClick() {
      // 在点击事件里也能直接用ref获取
      const linkElement = this.$refs.targetLink;
      const rects = linkElement.getClientRects();
      // ...
    }
  }
}
</script>

第二步：解决Uncaught TypeError: n.getClientRects is not a function报错 #

这个报错本质上是因为你调用getClientRects的对象不是一个有效的DOM元素。之前你拿到的是<img>其实也能调用这个方法，但如果是不小心拿到了Vue的响应式包装对象、null或者其他非DOM值，就会触发这个错误。

通过上面两种方式确保拿到的是真实的<a> DOM元素后，这个错误自然就会消失。

额外提醒 #

在Vue开发中，尽量避免直接操作DOM，但如果必须这么做，一定要确保元素已经完成挂载（比如在mounted钩子中操作，而不是created），否则$refs会返回undefined。

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