document.addEventListener("DOMContentLoaded", function(event) { require.config({ paths: { "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue" } }); require(['vue'], function(Vue){ Vue.filter('number_format', function(value){ if(isNaN(value)){ return '--'; } return parseFloat(value).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }); }); grainBinVolumeCalculator = new Vue({ el: '#grainBinVolumeCalculator', template: 'Calculate Grain Bin Capacity

1. Shape

    Round Rectangle 

2. Radius (feet) 
3. Width (feet) 
4. Length (feet) 
5. Height (feet)  Capacity: {{ volume | number_format }} bushels ', data: { shape: 'round', radius: 10, width: 10, length: 10, height: 10, analyticsEvent: false }, methods: { sendAnalyticsEvent: function(){ if(!this.analyticsEvent){ ga('send', 'event', 'Calculator', 'GrainBinVolumeCalculator', document.URL); this.analyticsEvent = true; } } }, computed: { volume: function(){ if(this.shape == 'round'){ return ( (this.radius * 2) * (this.radius * 2) ) * this.height * 0.628; } if(this.shape == 'rectangle'){ return this.width * this.length * this.height * 0.8; } } }, watch: { shape: function(){ this.sendAnalyticsEvent(); }, radius: function(){ this.sendAnalyticsEvent(); }, width: function(){ this.sendAnalyticsEvent(); }, length: function(){ this.sendAnalyticsEvent(); }, height: function(){ this.sendAnalyticsEvent(); } } }); }); });