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> 

：私はこのようになります「アドオン」でフォームを持っています。つまり、ユーザーがチェックボックスをオンにして2番目のオプションを選択し、最初のラジオボタンを選択すると、最後の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); 
     } 
    } 
})