javascript - JQuery not working with Vuejs - Stack Overflow

admin管理员组

文章数量:1194132

I'm trying to add a JQuery plugin, owl carousel to a list that rendered using 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();
    }
});

You can find the entire code from: /

I seem JQuery is complete it's execution before Vuejs rendered the list. How to avoid that issue? Can I run JQuery after fully rendered the Vuejs for loop items?

I'm trying to add a JQuery plugin, owl carousel to a list that rendered using 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();
    }
});

You can find the entire code from: https://jsfiddle.net/v18yjmuq/12/

I seem JQuery is complete it's execution before Vuejs rendered the list. How to avoid that issue? Can I run JQuery after fully rendered the Vuejs for loop items?

• javascript
• jquery
• vue.js

Share Improve this question Follow edited Sep 12, 2017 at 17:11 Arun Vinoth PrecogTechnologies 22.8k1717 gold badges6161 silver badges176176 bronze badges asked Aug 19, 2016 at 11:53 RenjithRenjith 2,42133 gold badges1414 silver badges2121 bronze badges 9

• 1 In what order did you place the scripts? Did you install jquery through npm? Did you try adding require('jquery')? Did you try wrapping jquery method in $(document).ready() method? Those are most common issues with vue.js and jquery people face. – Pablo Commented Aug 19, 2016 at 12:01
• @Pablo, Thanks for your comment. I'm using JQuery CDN, is it fine? – Renjith Commented Aug 19, 2016 at 12:09
• 1 As long as you load it before your application script tag, it is. I recommend you not usnig cdn unless is a test/practice/ultrasmall project. order should be: jquery > vue.js > application.js – Pablo Commented Aug 19, 2016 at 12:10
• @Pablo, Its a test project to study Vuejs. The order is correct in my code: jquery > vue.js > application.js – Renjith Commented Aug 19, 2016 at 12:15
• You should use $(document).ready() to control the rendering then. – Pablo Commented Aug 19, 2016 at 12:23

 |  Show 4 more comments

4 Answers 4

Sorted by: Reset to default 15

You should use Vue.nextTick when using a jQuery plugin that needs the DOM to be ready.

From the vue.js documentation:

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

In your case you should use the following implementation of the ready() method:

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

EDIT: For Vue 2 use mounted() or created()

Add ref prop to #user element like this

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

Then in add mounted method to Vue component:

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

Vue.nextTick will work in most of the cases, alternatively, you can write your code in the built-in updated() method.

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

This is really interesting. I think its taking some time to render the DOM and hence carousal is failing. Here I have added a setTimeout to add negligible delay and its working:

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

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

本文标签： javascriptJQuery not working with VuejsStack Overflow