程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

我想遍历我的代码并获取每个表单输入的值，因为我想显示表单输入的总分和严重性分数。总分将计算出现的症状数量 (0-3)，严重性评分将计算用户将滑块拖动到 (0-18) 的每个症状的严重程度。我希望每个分数随着用户拖动每个滑块而改变。

HTML：

<div class="field">
  <label class="label">Headache</label>
  <input
    v-model="form2.headache"
    name = "headache"
    type="range" 
    min="0" max="6" 
    class="slider"><span v-text="form2.headache"></span>
</div>

<div class="field">
  <label class="label">"Pressure in head"</label>
  <input
    v-model="form2.pressureInHead"
    name = "pressureInHead"
    type="range" 
    min="0" max="6" 
    class="slider"><span v-text="form2.pressureInHead"></span>
</div>

<div class="field">
  <label class="label">Neck Pain</label>
  <input
    v-model="form2.neckPain"
    name = "neckPain"
    type="range" 
    min="0" max="6" 
    class="slider"><span v-text="form2.neckPain"></span>
</div>
<div class="field"> 
  <p>Total number of symptoms: {{ total }}</p>
  <p>Symptom Severity Score: {{ severity }}</p>
</div>

JS：

data: {
    form2: {  
      headache: 0, 
      pressureInHead: 0,
      neckPain: 0, 
  }
}

如果用户将头痛拖至 4，头部压力拖至 0，颈部疼痛拖至 3，则总分将显示为 2，因为存在 2 个症状（头痛和颈部疼痛），严重性评分将显示为 7 (4+0+3 ）。

我曾尝试编写计算函数，但我不确定在 for 循环中写什么。我只能在网上找到迭代列表和数组。这是我尝试编写以计算总数的内容：

computed: {
  total() {
    var totalScore = 0
    for(value in this.data.form2) {
      totalScore+=Number(value)
    }
    return totalScore
  },
}

解决方案

您需要两个计算函数，一个用于总症状，另一个用于严重程度。

您可以使用reduce作业进行计算。第一个1为form2over 中的每个症状添加0。第二个对值求和。

computed: {
  totalSymptoms () {
    return Object.values(this.form2).reduce((sum, val) =>
        sum += (val > 0) ? 1 : 0, 0)
  },
  totalSeverity () {
    return Object.values(this.form2).reduce((sum, val) => sum += Number(val), 0)
  }
}

并在您的模板中使用它们，例如

<div class="field"> 
  <p>Total number of symptoms: {{ totalSymptoms }}</p>
  <p>Symptom Severity Score: {{ totalSeverity }}</p>
</div>