Vuetify 진행률 막대 계산에서 null 값을 제거하는 방법

Vuetify 진행률 막대 계산에서 null 값을 제거하는 방법

페이지의 12개의 체크박스를 클릭하면 완료율이 변경되는 진행률 바가 있습니다.문제는 모든 상자를 체크할 때까지(그 후 100이 될 때까지) NaN이 생성된다는 것입니다.

수식의 null 값을 무시하면 1개 또는 2개의 상자만 켜져도 진행 표시줄이 작동합니다.

vue.js로 구축...

진행 표시줄:

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

체크 박스가 있는 카드의 예:

<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>

방법:

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

계산:

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
},

그리고 vuex 스토어:

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

제 생각에 당신은 그냥 그 수를 셀 수 있을 것 같아요.true값을 체크박스 값 배열로 표시하고 값을 백분율로 반환합니다.
제거한다.v-model부터v-progress-linear, 남겨두기만 합니다.value:

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

계산된 값:

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;
},

언급URL : https://stackoverflow.com/questions/50143374/how-to-remove-null-values-from-vuetify-progress-bar-calculation