Javascript 将jQuery转换为Vue-未捕获类型错误：n.getClientRects不是函数

如何以Vue的方式编写此jquery代码

  // Scale the cell item.
  $(document).on('click','.cell-item a', function(event) {
    event.preventDefault()
    var $this = $(this)
    console.log($this) // [a] - correct
    var parent = $this.closest('.cell')
    var context = $this.closest('.row')

    parent.addClass('large-6 active').removeClass('large-3')
    parent.siblings('.cell').addClass('large-2').removeClass('large-3 large-6 active')
    context.siblings('.row-scale').find('.cell').addClass('large-3').removeClass('large-2 large-6 active')

    $('html, body').animate({
      scrollTop: $(this).offset().top - 225 // Create white space & ensure item is always centered in viewport
    }, '', function() {
      //
    })
  })

Vue模板：

<div class="large-3 cell cell-item text-center">
    <a href="#" v-on:click="foo">
       <img :src="item.image_src" :alt="item.image_alt">
    </a>
</div>

我得到这个错误：

Uncaught TypeError: n.getClientRects is not a function
    at xe.fn.init.offset (bundle.min.js:49544)
    at At.foo (bundle.min.js:139)
    at i (bundle.min.js:58507)
    at t (bundle.min.js:60317)
    at HTMLAnchorElement.e._withTask.e._withTask 

我还注意到，

console.log（$this）

的console.log在Vue和jQuery中是不同的

我在jquery中得到了

[a]

，这是正确的

但是我在Vue中得到了

[img]

，这很奇怪。应该是

[a]

，不是吗

有什么想法吗？

你想用它来代替

event.target

[event.currentTarget]在事件遍历DOM时标识事件的当前目标。它总是指事件处理程序已附加到的元素，而不是标识事件发生所在元素的event.target

您想使用而不是

event.target

[event.currentTarget]在事件遍历DOM时标识事件的当前目标。它总是指事件处理程序已附加到的元素，而不是标识事件发生所在元素的event.target

---

如果要使用Vue，请使用Vue。将DOM视为应用程序状态的一个副作用，不要自己到处搜索添加和删除类

而不是DOM遍历，以标识特定元素（必要时，通常不是。）

//在模板中：
; 无需进行DOM遍历

<div :class="{'large-3': isFoo, 'large-6': !isFoo}">...</div>
    or
<div v-if="isFoo" class="large-3">...</div>
<div v-if="!isFoo" class="large-6">...</div>

data: {
   isFoo: true 
},
methods: {
  foo() {  this.isFoo = !this.isFoo  } // toggle this boolean to swap the classnames
}

。。。
或
...
...
数据：{
伊斯福：是的
},
方法：{
foo（）{this.isFoo=！this.isFoo}//切换此布尔值以交换类名
}
如果要使用Vue，请使用Vue。将DOM视为应用程序状态的一个副作用，不要自己到处搜索添加和删除类

而不是DOM遍历，以标识特定元素（必要时，通常不是。）

//在模板中：
; 无需进行DOM遍历

<div :class="{'large-3': isFoo, 'large-6': !isFoo}">...</div>
    or
<div v-if="isFoo" class="large-3">...</div>
<div v-if="!isFoo" class="large-6">...</div>

data: {
   isFoo: true 
},
methods: {
  foo() {  this.isFoo = !this.isFoo  } // toggle this boolean to swap the classnames
}

。。。
或
...
...
数据：{
伊斯福：是的
},
方法：{
foo（）{this.isFoo=！this.isFoo}//切换此布尔值以交换类名
}

<div :class="{'large-3': isFoo, 'large-6': !isFoo}">...</div>
    or
<div v-if="isFoo" class="large-3">...</div>
<div v-if="!isFoo" class="large-6">...</div>

data: {
   isFoo: true 
},
methods: {
  foo() {  this.isFoo = !this.isFoo  } // toggle this boolean to swap the classnames
}