Question

如何以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>

Vue代码：

   methods: {
    foo(event) {
      event.preventDefault()
      var $this = $(event.target)
      console.log($this) // [img] - odd
      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() {
        //
      })
    }

我收到此错误：

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]，不应该吗？

有什么想法吗？

Answer 1

您想使用event.currentTarget代替event.target。

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

Answer 2

如果您要使用Vue，使用Vue 。将DOM视为应用程序状态的副作用，不要随意添加和删除类。

而不是DOM遍历，use Vue's $refs来识别特定元素（必要时。通常不会。）

// in the template:
<a ref="foo">...</a>
// in the component methods:
this.$refs.foo // <-- the anchor tag.   "this" is the component itself.

不是手动添加或删除类，而是设置状态变量。模板可以在决定which classes to include时检查这些变量;没有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
}

将jQuery转换为Vue - 未捕获TypeError：n.getClientRects不是函数

2 个答案: