Question

我刚刚开始使用vue.js，而我很难弄清楚如何将模型附加到表单元素上。我有一个带有＆＃34;插件的表格＆＃34;看起来像这样：

    <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应显示＆＃34; 30＆＃34;。表单正在服务器上生成，因此我无法轻易知道将出现哪种类型的控件。

这是我到目前为止在javascript方面所做的，但它不起作用：

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

我错过了什么？

Answer 1

您可以将多个复选框绑定到同一个变量，它将创建一个数组。但是，您无法为同一变量建模多种类型的输入。您需要将select绑定到另一个变量，将单选按钮绑定到另一个变量，然后将它们相加。

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

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

1 个答案: