Javascript JQuery不使用Vuejs

我正在尝试将JQuery插件owl carousel添加到使用Vuejs呈现的列表中

HTML 您可以从以下位置找到完整的代码：

---

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

这真的很有趣。我认为渲染DOM需要一些时间，因此carousal失败了。在这里，我添加了一个

setTimeout

，以添加可忽略的延迟及其工作：

当使用需要DOM准备就绪的jQuery插件时，应该使用

从vue.js文档中：

将回调延迟到下一个DOM更新周期之后执行。使用 在更改一些数据以等待DOM之后，它会立即启动 更新

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

编辑：对于Vue 2，使用

mounted（）

或

created（）

将ref-prop添加到#用户元素，如下所示

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

---

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

---

您将脚本按什么顺序放置？您是通过npm安装jquery的吗？您是否尝试添加require（'jquery'）？是否尝试将jquery方法包装到$（document）.ready（）方法中？vue.js和jquery人员面临的最常见问题。@Pablo，谢谢您的评论。我使用的是JQuery CDN，可以吗？只要在应用程序脚本标记之前加载它，就可以了。我建议您不要使用cdn，除非是测试/实践/超小型项目。顺序应该是：jquery>vue.js>application。js@Pablo，这是一个研究Vuejs的测试项目。在我的代码中顺序是正确的：jquery>vue.js>application.js您应该使用$（document）.ready（）来控制渲染。@Pablo-这里我们不能依赖

jquery.ready（）

，因为Vuejs的渲染引擎独立于jquery。您只需包装jquery元素调用，就可以使用它了。@Pablo-请看这个。它使用了

$（document）。ready（）

仍然会给出与OP相同的错误。您认为我们可以用其他方法使用它吗？我想是的，我一到家就会调整JSFIDLE并发布结果。@vijayP是的。它在使用setTimeout（）和setInterval（）时工作。但是，我们可以检查vuejs是否已完全加载吗？

ready（）

在Vue 2中已被删除-使用

mounted（）

或

created（）

var list = new Vue({
    el: '#user',
    data: {
        users: []
    },
    methods: {
        listUsers: function() {
            var users = [
            {
                id: 1,
                name: 'John'
            },
            {
                id: 2,
                name: 'Deo'
            },
            {
                id: 3,
                name: 'Anjela'
            },
            {
                id: 4,
                name: 'Samantha'
            }
            ];
            this.$set('users', users);
        },

        installOWLcarousel: function() {
            $('.owl-carousel').owlCarousel();
        }
    },
    ready: function() {
        this.listUsers();
        this.installOWLcarousel();
    }
});

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

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

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

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

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