【Vue.js】特定のclassを持つ要素全ての合計値を算出して表示したい。

Question

タイトルの通りです。
クラスでなくても良いので共通する属性、属性値が一致する要素が変更された場合、算出プロパティによる同期をしたいというのが目的です。
下記の要素郡があります。

<div id="inputArea">
  <input type="number" v-model="item_0" class="im-item" />
  <input type="number" v-model="item_1" class="im-item" />
  <input type="number" v-model="item_2" class="im-item" />
  <input type="number" v-model="item_3" class="im-item" />
  <input type="number" v-model="item_sum" readonly />
</div>

item_0～3を変更したらitem_sumに算出プロパティで集計後反映したい。

//【動作しないがやりたことはこういう感じ】
// 下記の記述だとitem_0～3の中身が変わっても算出プロパティが動かない。
vue_calc = new Vue({
  el: "#inputArea",
  data: {
    item_0 : 0,
    item_1 : 0,
    item_2 : 0,
    item_3 : 0
  },
  computed:{
    item_sum: function (){
      // 動かないが下記のようなことをやりたい
      var sum = 0;
      $('input.im-item').each(function() {
            sum += Number($(this).val());
      });
      return sum;
    },

  },
})

下記の記述だとアウトプット的には期待する動作だが、冗長すぎる。

//【動作するが冗長】
vue_calc = new Vue({
  el: "#inputArea",
  data: {
    item_0 : 0,
    item_1 : 0,
    item_2 : 0,
    item_3 : 0
  },
  computed:{
    item_sum: function (){
      // itemが1000個あったら物理的に1000個書かなくてはならない。
      var sum = 0;
      sum = (this.item_0 + this.item_1 + this.item_2 + this.item_3);
      return sum;
    },

  },
})

一応下記に使用ライブラリを共有します。
・jquery3.3.1
・vue.js2.5.16

こちら、当該問題を解決したくべくヒントを頂ければ幸いです。

Answer 1

item_0, item_1... のような形ではなく、配列にしてしまえば良いのではないでしょうか。

vue_calc = new Vue({
  el: "#inputArea",
  data: {
    // 長さ 10 の 0 埋めした配列を生成
    items: Array.apply(null, Array(10)).map(function () { return 0 }),
  },
  computed:{
    item_sum: function (){
      return this.items.reduce(function (sum, cur) {
        return sum + parseInt(cur, 10);
      }, 0);
    },
  },
})

注意点は、items 配列の要素を v-model に使いたい場合は v-for の一時変数 item ではなく items[index] としなければならないところ。

<div id="inputArea">
  <input
    v-for="(item, index) in items"
    :key="index"
    v-model="items[index]"
    type="number"
    class="im-item" />
  <input type="number" :value="item_sum" readonly />
</div>