如何创建使用 props 的变量，并在 Nuxt.js 中显示值

Question

I am using Nuxt.js with normal javascript. I have two props that are numbers. I want to take these props and calculate a percentage that i will then display in my template area.

Is this possible, and how can i achieve this? I have tried among others the following, but it's not working and I am not really known with JS.

<template>
    <div class="progress">
      <div role="progressbar" :aria-valuenow="goal_progress" aria-valuemin="0" aria-valuemax="100" class="progress-bar" :style="'width: ' + goal_progrress + '%';">{{goal_progress}}%</div>
    </div>
</template>


    <script>
    var goal_progress = (prop1 / prop2) * 100;
        
        export default {
              props: {
                  prop1: Number,
                  prop2: Number,
              }
            }
    </script>

In the index.vue i pass the following values.

<Example
  prop1=100
  prop2=1000 />

Answer 1

Use a computed property as follows :

export default {
              props: {
                  prop1: Number,
                  prop2: Number,
              }
            },
    computed:{
        goal_progress (){
            return (this.prop1 / this.prop2) * 100;
         } 
    }
}