【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