JQuery 不适用于 Vuejs

Posted 2023-02-22

【中文标题】JQuery 不适用于 Vuejs

【英文标题】：JQuery not working with Vuejs

【发布时间】：2016-12-26 13:56:04

【问题描述】：

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

html

<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>

JS

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();
    
);

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

我似乎在 Vuejs 呈现列表之前 JQuery 已经完成。如何避免这个问题？我可以在完全渲染循环项目的 Vuejs 后运行 JQuery 吗？

【问题讨论】：

您按什么顺序放置脚本？你是通过 npm 安装 jquery 的吗？您是否尝试添加 require('jquery')？您是否尝试在 $(document).ready() 方法中包装 jquery 方法？这些是人们面临的 vue.js 和 jquery 最常见的问题。

@Pablo，感谢您的评论。我用的是JQuery CDN，可以吗？

只要你在你的应用脚本标签之前加载它，它就是。我建议您不要使用 cdn，除非是测试/实践/超小型项目。顺序应该是：jquery > vue.js > application.js

@Pablo，这是一个学习Vuejs的测试项目。我的代码中的顺序是正确的：jquery > vue.js > application.js

你应该使用 $(document).ready() 来控制渲染。

【参考方案1】：

Vue.nextTick 在大多数情况下都可以工作，或者，您可以在内置的 updated() 方法中编写代码。

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

【参考方案2】：

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

来自 vue.js 文档：

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

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

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

编辑：对于 Vue 2，请使用 mounted() 或 created()

【讨论】：

ready() 在 Vue 2 中已弃用 - 使用 mounted() 或 created()

对于 Vue 3，请参阅 v3.vuejs.org/api/global-api.html#nexttick

【参考方案3】：

像这样将 ref 属性添加到 #user 元素

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

然后在Vue组件中添加mounted方法：

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

...

【参考方案4】：

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

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

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

【讨论】：

@Pablo - 这里我们不能依赖jQuery.ready()，因为 Vuejs 的渲染引擎是独立于 jQuery 的。

您只需包装您的 jquery 元素调用，应该可以使用它。

@Pablo - 请参阅此jsfiddle.net/v18yjmuq/14。它使用 $(document).ready() 仍然给出与 OP 相同的错误。你认为我们可以以其他方式使用它吗？

我想是的，一旦我回到家，我会调整 jsfiddle 并发布结果。

@vijayP 是的。它在使用 setTimeout() 和 setInterval() 时起作用。但是我们可以有任何事件来检查 vuejs 是否已完全加载？