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

Posted 2023-02-22

【中文标题】如何从 Vuetify 进度条计算中删除空值

【英文标题】：How to remove null values from Vuetify Progress Bar Calculation

【发布时间】：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

您解决了吗？如果是这样，您可以发布或接受答案吗？

【参考方案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;
,