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

【问题标题】：How to remove null values from Vuetify Progress Bar Calculation如何从 Vuetify 进度条计算中删除空值
【发布时间】：2018-10-13 01:53:35
【问题描述】：

我有一个进度条，当您点击页面上的 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)
    },

【问题讨论】：

使用radiobox或者这样+ (this.member.verifiedname || false) +
你能提供一个codepen吗？这是一个带有 vuetify 的空模板template.vuetifyjs.com
您解决了吗？如果是这样，您可以发布或接受答案吗？

标签： vue.js progress vuex vuetify.js

【解决方案1】：

我想您可以只计算复选框值数组中true 值的数量，然后以百分比的形式返回值。
从v-progress-linear 中删除v-model，只留下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;
},

【讨论】：