Question

我有一个进度条，当您点击页面上的12个复选框时，完成百分比会发生变化。问题是公式会产生NaN，直到检查完所有方框（然后它是100）。

如何在公式中忽略空值，以便即使只检查一个或两个方框也可以使用进度条？

使用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)
    },

Answer 1

我认为您可以计算复选框值数组中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;
},

如何从Vuetify进度条计算中删除空值

1 个答案: