So I am relatively new to learning Vue.js. I have gotten to understand most of it so far but I still have trouble with v-if never working. For example...

I would expect these to not show because showProgress is false!

<template v-if=showProgress>

  <div id=progressCols class=md-layout>

    <div class=md-layout-item :class=[{ activeStep: currentStep(1) }, '.md-elevation-1']></div>

    <div class=md-layout-item :class=[{ activeStep: currentStep(2) }, '.md-elevation-1']></div>

    <div class=md-layout-item :class=[{ activeStep: currentStep(3) }, '.md-elevation-1']></div>

    <div class=md-layout-item :class=[{ activeStep: currentStep(4) }, '.md-elevation-1']></div>

    <div class=md-layout-item :class=[{ activeStep: currentStep(5) }, '.md-elevation-1']></div>

    {{ showProgress }}

  </div>

</template>



<script>

  export default {

    name: 'ProgressCols',

    data: function(){

      return {

        showProgress: false 

      }

    },

    methods: {

      currentStep(i){

        let n = 0;

        if (this.$route.params.name == Ailments) {

          n =  1; 

        } else if (this.$route.params.name == Effects) {

          n =  2; 

        }



        i < n ? true : false

      }

    }

  }

</script>