Vue item quantity price calculator

Calculates price based on currently selected product & quantity

by joshmoto

HTML

<div id="price-picker">

  <div class="form-group">
    <label for="item">Item</label>
    <select name="item" id="item" v-model="selected">
       <option :value="false" selected disabled>
         Choose Option
       </option>
       <option :value="key" v-for="(item, key) in prices">
         {{ item.name }} - {{ item.value | price }} {{ currency }}
       </option>
       <option is="option"></option>
    </select>
  
  </div>
  
  <div class="form-group">
    <label for="quantity">Quantity</label>
    <input type="number" step="1" max="20" min="1" id="quantity" v-model="quantity" />
  </div>
  
  <div v-if="selectedItem">
    <strong>Chosen:</strong>
    {{ selectedItem.name }}
    - {{ quantity * selectedItem.value | price }}
    {{ currency }}
  </div>
  
</div>

SCSS

.form-group {
  margin-bottom: 15px;
  
  label {
    display: block;
  }
  
  input, select {
    display: block;
    width: 100%;
  }
}

JavaScript

Vue.component('option', {
  template: `
    <option
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
    	{{ item.name }} - {{ item.value | price }} {{ currency }}
    </option>
  `
});

new Vue({
  el: '#price-picker',
  
  filters: {
  	price(value){
    	return Number((value).toFixed(1)).toLocaleString();
    }
  },
  
  data: {
  	currency: 'AED',
  	selected: false,
    quantity: 1,
    
  	prices: [
    	{
      	name: 'Anodised',
        value: 5000,
      },
      {
      	
      	name: 'Red',
        value: 5000,
      },
      {
      	name: 'Black',
        value: 5000,
      },
      {
      	name: 'Chrome',
        value: 5200,
      },
    ],
  },
  
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    },
  	selectedItem() {
    	if (!(false === this.selected)) {
      	return this.prices[this.selected];
      }
      
      return false;
    }
  }
})