JavaScript有效，但在Vue组件中不起作用

Question

我有以下一段javascript代码，它们可以在普通的html页面上完美执行：

    $(function(){
        $('#object{{ object.position }} img:eq(0)')[0].style.setProperty('display', 'block', 'important');
        setInterval(function(){
        $('#object{{ object.position }} img:eq(0)').fadeOut({{ object.data()['fadeSpeed'] }}, function() {
            this.style.setProperty('display', 'none', 'important');
        })
            .next('img').fadeIn({{ object.data()['fadeSpeed'] }}, function() {this.style.setProperty('display', 'block', 'important');})
            .end().appendTo('#object{{ object.id }}');},
            {{ object.data()['durationInSeconds'] * 1000 }});
});

它获取一个div，检查所有img标签并在它们之间旋转（基本上是幻灯片显示）。

我正在学习有关Vue组件的知识，并将其移至一个。看起来像这样：

methods: {
    imageSlideShow: function() {
      var fadeSpeed = this.data.fadeSpeed;
      $(function() {
        $("#object" + this.position + " img:eq(0)")
          .fadeOut(fadeSpeed, function() {
            this.style.setProperty("display", "none", "important");
          })
          .next("img")
          .fadeIn(fadeSpeed, function() {
            this.style.setProperty("display", "block", "important");
          })
          .end()
          .appendTo("#object" + this.position);
      }, this.data.durationInSeconds * 1000);
    },
  }

由于

而失败

  

无法读取未定义的属性'style'

有人可以向我解释为什么this.style不再引用div（就像在JavaScript期间一样）吗？