每x次Vue垂直自动滚动

Question

嗨，我正在使用vue渲染一些数据，这些数据分为3个引导程序列表组，我需要在屏幕上显示所有内容，这意味着我需要自动向下滚动每个项目列表。

我正在寻找的东西在这里用jQuery显示 https://codepen.io/jamesreegan/pen/OVMVvg

我该如何实现这一目标？或仅显示5个项目，然后每x次一个接一个地添加下一个项目

这是我的html

<div id="dashboard">

                <div class="row">
                    <div class="col-md-4">
                        <div class="list-group">

                            <div v-for="stock in stocks.abastecer" class="list-group-item list-group-item-action" v-autoscroll="'center'">

                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">{{ stock.referencia }}</h5>
                                    <small>{{ stock.estado }}</small>
                                </div>

                                <p class="mb-1">
                                    @*<div line-progressbar :data-percentage=stock.percentagem data-progress-color="#1abc9c"></div>*@
                                    <vue-simple-progress size="medium"
                                                         :val=stock.percentagem
                                                         :text=stock.percentagem.toString()
                                                         bar-transition="all 2s ease">
                                    </vue-simple-progress>
                                </p>

                            </div>

                        </div>


                    </div>

                    <div class="col-md-4">
                        <div class="list-group">

                            <div v-for="stock in stocks.excesso" class="list-group-item list-group-item-action">

                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">{{ stock.referencia }}</h5>
                                    <small>{{ stock.estado }}</small>
                                </div>

                                <p class="mb-1">
                                    @*<div line-progressbar :data-percentage=stock.percentagem data-progress-color="#1abc9c"></div>*@
                                    <vue-simple-progress size="medium"
                                                         :val=stock.percentagem
                                                         :text=stock.percentagem.toString()
                                                         bar-transition="all 2s ease">
                                    </vue-simple-progress>
                                </p>

                           </div>
                        </div>
                    </div>

                    <div class="col-md-4">

                        <div class="list-group">

                            <div v-for="stock in stocks.ok" class="list-group-item list-group-item-action">

                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">{{ stock.referencia }}</h5>
                                    <small>{{ stock.estado }}</small>
                                </div>

                                <p class="mb-1">
                                    @*<div line-progressbar :data-percentage=stock.percentagem data-progress-color="#1abc9c"></div>*@
                                    <vue-simple-progress size="medium"
                                                         :val=stock.percentagem
                                                         :text=stock.percentagem.toString()
                                                         bar-transition="all 2s ease">
                                    </vue-simple-progress>
                                </p>

                           </div>
                        </div>
                    </div>
                </div>
            </div>

和js

<script>

    var sector = 'UAP1'

    $('.progressbar').LineProgressbar();

    var dashboard = new Vue({
        el: '#dashboard',
        data: {
            stocks: []
        },
        mounted: function () {
            this.$http.get('/Dashboard/Index?handler=StocksBySector', { sector: sector }).then(response => {
                this.stocks = response.body;
            });
        }
    });



</script>