How to convert total value to percentage % in vue js / javascript?

Question

I am trying to create a progressbar i want to convert total value to percentage % and want to show it as a style width value, for example 40% out of 100% here 40% will 400USD and 100% will be 1000USD how can we do it is it possible to create some function in array object?

I am using VueJS 3 with Nuxt Js

Below is my VueJs code in < Progressbar /> component

<template>
   <div>
     <div class="progress mt-0 h-1 bg-gray-200 rounded-full w-full overflow-hidden transition-all">
       <div class="bg-blue-600 h-1 progress-bar progress-bar-animated" role="progressbar" style="width: 88%;" :aria-valuenow="deal.collected" aria-valuemin="0" :aria-valuemax="deal.goal"></div>
     </div>
   </div>
</template>

Style

.progress-bar{
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-size: 6px 6px;
}
.progress-bar-animated{
    animation: 1s linear infinite progress-bar-stripes;
}
@keyframes progress-bar-stripes {
    0% {
        background-position-x: 0.5rem;
    }
}

export default {
    data(){
        return{
            deals:[
                // deals
                { 
                    icon: require("../../assets/img/ico/ico-1.jpeg"),
                    name: "Agoric",
                    type: "Blockchain Service",
                    collected: 883673,
                    goal: 1000000,
                    status: "11h 3m" + " left",
                    link: "/"
                }
            ]
        }
    },
}

Answer 1

Just use the formular deal.collected * 100 / deal.goal

new Vue({
    el: '#app',
    computed: {
      percentage() {
        return (deal) => deal.collected * 100 / deal.goal
      }
    },
    data(){
        return{
            deals:[
                // deals
                { 
                    icon: ''/*require("../../assets/img/ico/ico-1.jpeg")*/,
                    name: "Agoric",
                    type: "Blockchain Service",
                    collected: 883673,
                    goal: 1000000,
                    status: "11h 3m" + " left",
                    link: "/"
                }
            ]
        }
    },
})

.progress-bar{
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-size: 6px 6px;
}
.progress-bar-animated{
    animation: 1s linear infinite progress-bar-stripes;
}
@keyframes progress-bar-stripes {
    0% {
        background-position-x: 0.5rem;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <div v-for="deal of deals">
     <div class="progress mt-0 h-1 bg-gray-200 rounded-full w-full overflow-hidden transition-all">
       <div class="bg-blue-600 h-1 progress-bar progress-bar-animated" role="progressbar" :style="{ 'width': percentage(deal) + '%' }" :aria-valuenow="deal.collected" aria-valuemin="0" :aria-valuemax="deal.goal"></div>
     </div>
   </div>
</div>