title: How to loop over and access Vue data
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="field"&gt;
    &lt;label class="label"&gt;Headache&lt;/label&gt;
    &lt;input
      v-model="form2.headache"
      name = "headache"
      type="range" 
      min="0" max="6" 
      class="slider"&gt;&lt;span v-text="form2.headache"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="field"&gt;
    &lt;label class="label"&gt;"Pressure in head"&lt;/label&gt;
    &lt;input
      v-model="form2.pressureInHead"
      name = "pressureInHead"
      type="range" 
      min="0" max="6" 
      class="slider"&gt;&lt;span v-text="form2.pressureInHead"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="field"&gt;
    &lt;label class="label"&gt;Neck Pain&lt;/label&gt;
    &lt;input
      v-model="form2.neckPain"
      name = "neckPain"
      type="range" 
      min="0" max="6" 
      class="slider"&gt;&lt;span v-text="form2.neckPain"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="field"&gt; 
    &lt;p&gt;Total number of symptoms: {{ total }}&lt;/p&gt;
    &lt;p&gt;Symptom Severity Score: {{ severity }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>data: {
      form2: {  
        headache: 0, 
        pressureInHead: 0,
        neckPain: 0, 
    }
  }
  </code></pre>
  
  <p>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).</p>
  
  <p>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:</p>
  
  <pre><code>computed: {
    total() {
      var totalScore = 0
      for(value in this.data.form2) {
        totalScore+=Number(value)
      }
      return totalScore
    },
  }
  </code></pre>