How to loop over and access Vue data

Question

I want to loop over my code and grab the value of each form input because I want to display a total score and a severity score from my form inputs. The total score will calculate how many symptoms are present (0-3) and the severity score will calculate the severity of each symptom the user drags the slider to (0-18). I want each score to change as the user drags each slider.

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

If the user dragged headache to 4, pressure in head to 0, and neck pain to 3, the total score would display 2 because 2 symptoms (headache and neck pain) are present and the severity score would display 7 (4+0+3).

I have tried writing computed functions, but I am not sure what to write in the for-loop. I can only find iterating over lists and arrays online. This is what I've tried writing to calculate the total:

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

The main problem with your loop is that for..in iterates the object keys so you'd want Number(this.data.form2[value]). As below, Object.values() is another option — Phil
– Phil, Commented Apr 22, 2020 at 5:38

Phil · Accepted Answer · 2020-04-22 05:36:25Z

1

You'll want two computed functions, one for the total symptoms and another for the severity.

You can do your calculations using a reduce job. The first adds 1 for each symptom in form2 over 0. The second sums the values.

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

and use them in your template like

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

edited Apr 22, 2020 at 5:36

answered Apr 22, 2020 at 5:22

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

Works like a charm. I just had to wrap the last val in the totalSeverity function you wrote in a number because I don't think each value is an integer type, but works perfectly fine now. Thanks a lot!

Collectives™ on Stack Overflow

How to loop over and access Vue data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related