How to remove null values from Vuetify Progress Bar Calculation

Question

I've got a progress bar where the percent complete changes as you click through 12 checkboxes on the page. The problem is that the formula produces NaN until all of the boxes are checked (then it's 100).

How can I ignore null values in my formula so that the progress bar will work even of only one or two boxes are checked?

Built with vue.js...

The progress bar:

<v-progress-linear v-model="valueDeterminate" value="12" color="success"></v-progress-linear>

Example of a card with checkbox:

<v-card flat class="ma-1 pa-3 text-xs-left">
    <v-checkbox
      v-model="member.verifiedref3"
      color="success"
      hide-details
      @change="updateValid"
    ></v-checkbox>
    <div class="title mb-2">Reference 3</div>
    <p>Name: {{ member.reference3 }}<br />
    Phone: {{ member.reference3Phone }}<br />
    Description: {{ member.reference3Description }}</p>
  </v-card-text>
  </v-card>

Methods:

updateValid () {
  let {member} = this;
  this.$store.dispatch('updateVerification', member)
}

Computed:

validprogress (){
  let progress = (this.member.verifiedname + this.member.verifiedaddress + this.member.verifieddob + this.member.verifiedirs + this.member.verifiedlicense + this.member.verifiedins + this.member.verifiedcar + this.member.verifiedtools + this.member.verifiedexamples + this.member.verifiedref1 + this.member.verifiedref2 + this.member.verifiedref3) * (100/12);
  this.valueDeterminate = progress;
  return progress
},

And in vuex store:

updateVerification ({commit}, payload) {
      const db = firebase.database()
      console.log(payload);
      db.ref("contractor").child(payload.id).update(payload)
    },

use radiobox or like this way `+ (this.member.verifiedname || false) + ` — Sphinx, May 02 '18 at 20:58
Can you provide a codepen please ? Here's an empty template with vuetify https://template.vuetifyjs.com/ — Toodoo, May 07 '18 at 13:29
Have you resolved this? If so, could you post or accept an answer? — Traxo, Jul 18 '18 at 10:14

Traxo · Answer 1 · 2018-06-12T10:57:57.053

I presume you can just count the number of true values in array of checkbox values, and return value as percentage.
Remove v-model from v-progress-linear, leave only value:

<v-progress-linear :value="percentageCompleted"></v-progress-linear>

Computed value:

percentageCompleted () {
    let checkboxValues = [
        this.member.verifiedname,  
        this.member.verifiedaddress,
        this.member.verifieddob,
        this.member.verifiedirs, 
        this.member.verifiedlicense,
        this.member.verifiedins,
        this.member.verifiedcar,
        this.member.verifiedtools,
        this.member.verifiedexamples,
        this.member.verifiedref1,
        this.member.verifiedref2,
        this.member.verifiedref3,
    ]
    const countTruthy = (a, b) => {
           return b ? a + 1 : a;
    }
    return checkboxValues.reduce(countTruthy, 0) / checkboxValues.length * 100;
},

How to remove null values from Vuetify Progress Bar Calculation

1 Answers1