Question

我试图将一个JQuery插件，owl轮播添加到使用Vuejs呈现的列表中。

HTML

ARuntimeImporter.FindClass(ClassName).RegisterPropertyHelper(GetterCodeAddress, SetterCodeAddress, PropertyName);

JS

<h4>1. Vuejs rendered items with OWL Carousel (not working)</h4>
<div id="user" class="owl-carousel">
    <div class="item" v-for="user in users">{{ user.name }}</div>
</div>

<h4>2. Pure HTML with OWL Carousel (working)</h4>
<div class="owl-carousel">
    <div class="item">Sunny</div>
    <div class="item">Michel</div>
    <div class="item">Daneil</div>
    <div class="item">Sony</div>
</div>

您可以从以下网址找到完整的代码：https://jsfiddle.net/v18yjmuq/12/

我觉得JQuery在Vuejs呈现列表之前完成了它的执行。如何避免这个问题？完全渲染Vuejs for循环项后，我可以运行JQuery吗？

Answer 1

使用需要准备好DOM的jQuery插件时，你应该使用Vue.nextTick。

来自vue.js文档：

将回调推迟到下一个DOM更新周期后执行。使用在您更改了一些数据以等待DOM之后立即执行此操作更新

在您的情况下，您应该使用ready（）方法的以下实现：

ready: function() {
    this.listUsers();
    Vue.nextTick(function () {
        this.installOWLcarousel();
    }.bind(this))
 }

Answer 2

像这样向#user元素添加引用道具

<div id="user" class="owl-carousel" ref="carousel_or_anything">

然后将已安装的方法添加到Vue组件中：

...
mounted: function(){
  jQuery(this.$refs.carousel_or_anything).owlCarousel();
}
...

Answer 3

Vue.nextTick在大多数情况下都可以使用，或者，您可以使用内置的updated（）方法编写代码。

updated(){
   // the method called when DOM gets updated
   // write jquery code here 
}

Answer 4

这真的很有趣。我认为它花了一些时间来渲染DOM，因此carousal失败了。在这里，我添加了一个setTimeout来添加可忽略的延迟及其工作：

https://jsfiddle.net/v18yjmuq/13/

ready: function() {
    this.listUsers();
    var self = this;
    setTimeout(function() {
      self.installOWLcarousel();
    }, 0);
  }

JQuery没有与Vuejs合作

HTML

JS

4 个答案: