【Vue.js】DOM から取得してきた値を配列/連想配列化、動的に値を操作する

はじめに

Vue.js に初チャレンジしてみたので、書き残し!

デモ: https://jsfiddle.net/se1yn/tt9fffps/

.ts

var app = new Vue ({
  el: '#app',
  data: {
    itemList: [],
    totalValue: 0,
    selectVal1: 0,
    selectVal2: 0,
    selectVal3: 0,
  },
  computed:{
    isDisabled: function() {
        return ((Number(this.selectVal1) === 0) && (Number(this.selectVal2) === 0) && (Number(this.selectVal3) === 0));
    }
  },
  created: function() {
    this.calc();
  },
  methods: {
    calc: function() {
      let itemList = [];
      let itemListValues = [10, 100, 1000];
            
      $("[id^=name]").each(function () {
        // id から連番取得
        let itemNum: number = Number($(this).attr("id").match(/\d/g));
        
        // 配列にオブジェクトをpush
        itemList.push({
          "name": $("#name" + itemNum).html(),
          "hasNum": Number($("#has-num" + itemNum).html()),
          "selectValue": Number($("#select" + (itemNum)).val()) * itemListValues[itemNum - 1],
          "afterHasNum": Number($("#has-num" + itemNum).html()) - Number($("#select" + (itemNum)).val())
        });
      });

      this.itemList = itemList;
      
      if(!$.isEmptyObject(itemList)) {
        this.totalValue = itemList.map(function(row){
          return [row["selectValue"]]
        }).reduce(function(prev, current){
          return prev.concat(current);
        }).reduce(function(prev, current){
          return prev + current;
        });
      }
    },
    comfirmModal: function(isDisabled, event) {
      if(isDisabled) {
        event.preventDefault();
        return false;
      }
      alert("この内容でアイテムを換金しますか?")
    }
  }
})

勘所

data は初期値、 created で初回に一発 calc メソッドを走らせる
v-on:click="comfirmModal(isDisabled, $event)" の第2引数で event が取得できる
computed で確認ポップアップの enable/disable をセレクトボックスの値に依存させて(ウォッチさせて)切り変える

所感

・公式のガイドライン強い
・ViewModel的な値は, computed を使って get/set した方が良いのかな

参考
computed: 算出プロパティとウォッチャ — Vue.js
component: ミックスイン — Vue.js

http://qiita.com/phi/items/723aa59851b0716a87e3http://qiita.com/phi/items/723aa59851b0716a87e3
https://javascript.programmer-reference.com/jquery-isemptyobject/
http://qiita.com/_shimizu/items/dd72a0f32647abd40fd7