Javascript Vue.js在循环中设置动画

我是vue.js的新手，到目前为止我很喜欢它，因为我通常做php循环，所以我只是想了解事情是如何工作的。我通过api获取数据，并将其循环，它显示了我所需要的一切。在此之前，我有一个进度条，它使用jquery并获取一个数据属性，该属性是2个变量的简单划分。如何使用vue实现这一点的最佳方法？现在它不做每个循环，只做一次将进度划分到所有项目上。如果我只对每个循环执行

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>

---

此外，您不需要使用普通的php和jqueryvue@GONG我看过文档，但不完全理解如何实现这一点。我知道你可以调用JS转换，但是我如何在“for”循环中动态设置宽度呢？同样，你不需要使用普通的php和jqueryvue@GONG我看过文档，但不完全理解如何实现这一点。我知道您可以调用JS转换，但是如何在“for”循环中动态设置宽度

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

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

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