[Vuejs]-Vue.js : update Bottstrap progressBar within loop in Method

by

0👍

Demo: https://jsfiddle.net/eywraw8t/183735/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .loader-wrapper {
            position: relative;
            height: 20px;
            background-color: gray;
            width: 100%;
            text-align: center;
            color: #fff;
        }
        .loader {
            position: absolute;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="loader-wrapper">
            <div class="loader" :style="{ width: widthPercentage }"></div>
            {{ widthPercentage }}
        </div>


        <button @click="start">Start</button>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",

            data: {
                width: 0
            },

            computed: {
                widthPercentage() {
                    return this.width + "%";
                }
            },

            methods: {
                start() {
                    for (let i = 0; i < 1000000; ++i) {
                        if (i === 500000) {
                            this.width = 50;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

Please note that this is very inefficient, because each click will trigger this massive loop. At this point it doesn’t matter if you will loop 10 or 1000000 times, because it will still take 1 frame to render. The difference is that bigger loop will make this frame take longer to render.

Leave a comment