JQuery无法与Vuej一起使用

x7rlezfr 于 2022-12-14 发布在 Vue.js

关注(0)|答案(4)|浏览(135)

我正在尝试添加一个JQuery插件，猫头鹰轮播到一个使用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/
我看JQuery在Vuejs呈现列表之前已经完成了它的执行。如何避免这个问题？我可以在完全呈现Vuejs for循环项之后运行JQuery吗？

vue.js

来源：https://stackoverflow.com/questions/39038462/jquery-not-working-with-vuejs

4条答案

按热度按时间

mf98qq941#

当使用需要DOM的jQuery插件时，应该使用Vue.nextTick。
在vue.js文档中：
延迟回调，使其在下一个DOM更新周期之后执行。在更改了一些数据以等待DOM更新之后立即使用它。
在您的情况下，您应该使用ready（）方法的下列实作：

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

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

赞(0）回复(0）举报 2022-12-14

dfuffjeb2#

将引用属性添加到#user元素，如下所示

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

然后在添加挂载方法到Vue组件中：

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

赞(0）回复(0）举报 2022-12-14

abithluo3#

nextTick在大多数情况下都可以工作，或者，你可以在内置的updated（）方法中编写代码。

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

赞(0）回复(0）举报 2022-12-14

qgelzfjb4#

这真的很有意思。我认为渲染DOM需要一些时间，因此carourol失败了。这里我添加了一个setTimeout来添加可忽略的延迟和它的工作：
https://jsfiddle.net/v18yjmuq/13/

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

赞(0）回复(0）举报 2022-12-14

我来回答

JQuery无法与Vuej一起使用

JS的编号

4条答案

相关问题

热门标签

最新问答