How to sum values from different form elements in vue.js?

Question

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:

    <div id="example">
        <input type="checkbox" name="option1" value="10" v-model="addons">
        <select name="option2" v-model="addons">
            <option value="5" />
            <option value="10 />
            <option value="15" />
        </select>
        <input type="radio" name="option3" value="10" v-model="addons">
        <input type="radio" name="option3" value="20" v-model="addons">

        <div>{{total}}</div>
    </div>

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.

This is what I have so far on the javascript side, but it's not working:

 new Vue({
    el: '#example',
    data: {
        addons: []
    },
    computed: {
        total: function() {
            return this.addons.reduce(function(sum, addon) {
                return sum + addon;
            }, 0);
        }
    }
})

What am I missing?

what is that extra variable there? where did it came from? — Yerko Palma
– Yerko Palma, Commented Apr 18, 2016 at 11:48
Your variable is called addons but you are trying to sum this.extras — Jeff
– Jeff, Commented Apr 18, 2016 at 12:29
Sorry, I missed a variable while trying to simplify the example. Fixed. — kenske
– kenske, Commented Apr 18, 2016 at 14:47

Jeff · Accepted Answer · 2016-04-18 15:39:00Z

1

You can bind multiple checkboxes to the same variable, and it will create an array. However, you can't model multiple types of inputs to the same variable. You'd need to bind the select to a different variable and the radio buttons to a different variable, then sum those.

Fiddle: https://jsfiddle.net/69dty5a1/

 new Vue({
    el: '#example',
    data: {
        addons: 10,
        select:5,
        radio:10
    },
    computed: {
        total: function() {
            return parseInt(this.addons) + parseInt(this.radio) + parseInt(this.select);
        }
    }
})

edited Apr 18, 2016 at 15:39

answered Apr 18, 2016 at 15:32

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

2 Comments

kenske Over a year ago

That works, but I'm trying to find a more dynamic solution. The form elements are being generated on the server side and so I don't have an easy way to know what types of controls will be present. I was hoping there was an easy way to attach the model to all the inputs.

Jeff Over a year ago

I guess you'll need to provide more information about how the inputs are being generated and what they might look like, because I don't know how dynamic you need it to be. Hopefully this helps explain the issue with v-model at least...

Collectives™ on Stack Overflow

How to sum values from different form elements in vue.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related