如何对 vue.js 中不同表单元素的值求和？

Question

我刚刚开始使用 vue.js，我很难弄清楚如何将模型附加到表单元素。我有一个带有“插件”的表单，如下所示：

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

我正在尝试获取所有选定插件的总和。这意味着如果用户选中复选框，选择第二个选项，并选择第一个单选按钮，最后一个 div 应该显示“30”。表单正在服务器上生成，因此我无法轻松知道将出现哪种类型的控件。

这是我目前在 javascript 方面所拥有的，但它不起作用：

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

我错过了什么？

Answer 1

您可以将多个复选框绑定到同一个变量，它会创建一个数组。但是，您不能对同一个变量的多种类型的输入进行建模。您需要将选择绑定到不同的变量，将单选按钮绑定到不同的变量，然后将它们相加。

小提琴：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);
        }
    }
})