Vue.js循环动画

Question

我是vue.js的新手并且喜欢它到目前为止，只是试图了解事情是如何工作的，因为我通常做了php循环。我通过api获取数据并将其循环好，它显示了我需要的所有内容。现在，在我有一个动画使用jquery并获取数据属性的进度条之前，该属性是2个变量的简单划分。用vue做到这一点的最佳方法是什么？现在它不会执行each循环，只需将进度划分为所有项目即可。如果我只针对每个循环执行alert，那么只触发一次，而不是每个项

<div class="wrap-content" id="home">

    <div class="container">

        <h1>Goals</h1>
        <h2>Here are your goals. </h2>

        <?php if (!$user_id) { ?>

            <h3>Sorry, no goals. </h3>
            <p>Please sign up to start checking them off.</p>

        <?php } else { ?>

            <ul id="goal-list" class="item-list">

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

                <infinite-loading :on-infinite="onInfinite" :distance="distance"  spinner="waveDots" ></infinite-loading>

            </ul>

        <?php } ?>



    </div>

</div>


<script type="text/javascript">

    var api = "/XXXXXXX/api_badges_list.php?&page_num=0&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: <?php echo $user_id ?>
                        },
                    }).then((response) => 
                    {

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

                        if (response.body.badges.length > this.list.length)
                        {
                            setTimeout(function () 
                            {
                                var temp = [];
                                for (var i = this.list.length; i <= 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) => {
                        console.log(response);
                    });
                },
            }
        })


    });

</script>

然后是动画：

$('.goal').each(function( index ) {

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

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