title: How to sum values from different form elements in vue.js?
body: <p>I'm just getting started with vue.js and I'm having a hard time figuring out how to attach models to form elements. I have a form with "addons" that looks like this:</p>
  
  <pre><code>    &lt;div id="example"&gt;
          &lt;input type="checkbox" name="option1" value="10" v-model="addons"&gt;
          &lt;select name="option2" v-model="addons"&gt;
              &lt;option value="5" /&gt;
              &lt;option value="10 /&gt;
              &lt;option value="15" /&gt;
          &lt;/select&gt;
          &lt;input type="radio" name="option3" value="10" v-model="addons"&gt;
          &lt;input type="radio" name="option3" value="20" v-model="addons"&gt;
  
          &lt;div&gt;{{total}}&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to get the sum of all the selected addons. This means that if the user checks the checkbox, selects the second option, and selects the first radio button, the last div should display "30". The form is being generated on the server and so I have no easy way of knowing which type of controls will be present.</p>
  
  <p>This is what I have so far on the javascript side, but it's not working:</p>
  
  <pre><code> new Vue({
      el: '#example',
      data: {
          addons: []
      },
      computed: {
          total: function() {
              return this.addons.reduce(function(sum, addon) {
                  return sum + addon;
              }, 0);
          }
      }
  })
  </code></pre>
  
  <p>What am I missing?</p>