Vue.js animate in loop
<p>I am new to vue.js and love it so far, just trying to understand how things work since I usually did php loops. I am getting my data through an api and looping it just fine, it shows everything I need it to. Now before I had a progress bar that animated uses jquery and grabbing a data attribute which was simple division of 2 variables. How is the best way to do this with vue? Right now it doesnt do the <code>each</code> loop, just does it once divides the progress over all the items. If I just do <code>alert</code> for the each loop, that only triggers once as well, not for each item</p>

<pre><code>&lt;div class="wrap-content" id="home"&gt;

    &lt;div class="container"&gt;

        &lt;h1&gt;Goals&lt;/h1&gt;
        &lt;h2&gt;Here are your goals. &lt;/h2&gt;

        &lt;?php if (!$user_id) { ?&gt;

            &lt;h3&gt;Sorry, no goals. &lt;/h3&gt;
            &lt;p&gt;Please sign up to start checking them off.&lt;/p&gt;

        &lt;?php } else { ?&gt;

            &lt;ul id="goal-list" class="item-list"&gt;

                &lt;li v-for="item in list" class="goal"&gt;
                    &lt;img :src=" 'https://XXXXXXX/' + item.badge_image "&gt;
                    &lt;h3 &gt;{{ item.badge_social }}&lt;/h3&gt;
                    &lt;div class="line" data-percent="{{ (item.badge_progress /  item.badge_goal) * 100  }}%"&gt;
                        &lt;div class="line-percent"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;p&gt;&lt;/p&gt;
                &lt;/li&gt;

                &lt;infinite-loading :on-infinite="onInfinite" :distance="distance"  spinner="waveDots" &gt;&lt;/infinite-loading&gt;

            &lt;/ul&gt;

        &lt;?php } ?&gt;



    &lt;/div&gt;

&lt;/div&gt;


&lt;script type="text/javascript"&gt;

    var api = "/XXXXXXX/api_badges_list.php?&amp;page_num=0&amp;per_page=100";

    $(document).ready( function()
    {
        new Vue({
            el: '.item-list',
            data: {
                distance: 30,
                list: []
            },
            methods: {
                onInfinite: function () 
                {
                    this.$http.get(api, 
                    {
                        params: 
                        {
                          user_id: &lt;?php echo $user_id ?&gt;
                        },
                    }).then((response) =&gt; 
                    {

                        for (var i = 0; i &lt; 6; i++) 
                        {
                            this.list.push( response.body.badges[i] );
                        }

                        if (response.body.badges.length &gt; this.list.length)
                        {
                            setTimeout(function () 
                            {
                                var temp = [];
                                for (var i = this.list.length; i &lt;= this.list.length + 5; i++) {
                                    temp.push( response.body.badges[i] );
                                }

                                this.list = this.list.concat(temp);
                                this.$broadcast('$InfiniteLoading:loaded');

                            }.bind(this), 1000);
                        }else {
                          this.$broadcast('$InfiniteLoading:complete');
                        }   

                    }, (response) =&gt; {
                        console.log(response);
                    });
                },
            }
        })


    });

&lt;/script&gt;
</code></pre>

<p>then the animation:</p>

<pre><code>$('.goal').each(function( index ) {

  var percent = $(this).find('.line').attr('data-percent');

  $(this).find('.line-percent').animate({
    width:'100%'
  },3000);
});
</code></pre>