Vue item quantity price calculator

Calculates price based on currently selected product & quantity

by joshmoto

HTML

<div id="price-picker" data-rate="gbp">

  <div class="form-group">
    <label for="cash">Currency</label>
    <select name="cash" id="cash" v-model="cash">
       <option :value="false" selected disabled>
         Choose Currency
       </option>
       <option :value="key" v-for="(item, key) in currency">
         {{ item.name | ccc }}
       </option>
    </select>
  
  </div>

  <div class="form-group" v-if="selectedCash">
    <label for="item">Item</label>
    <select name="item" id="item" v-model="item">
       <option :value="false" selected disabled>
         Choose Option
       </option>
       <option :value="key" v-for="(item, key) in prices">
         {{ item.name }} - {{ item.value | price }} {{ selectedCash.name | ccc }} 
       </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 }}
    {{ selectedCash.name | ccc }}
  </div>
  
</div>

SCSS

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

Vue

var app = new Vue({
  el: '#price-picker',
  filters: {
    ccc(value){
    	if(value) {
      	return String(value).toUpperCase();
      }
      return;
    },
  	price(value){
    	return Number((value).toFixed(1)).toLocaleString();
    },
    rate(value){
    	return this.data.currency.name
    }
  },
  data: {
  	cash: false,
  	currency: [
    	{
      	name: 'aed',
        value: 1
      },
      {
      	name: 'gbp',
        value: 4.9
      } 
    ],
  	item: false,
    quantity: 1,
  	prices: [
    	{
      	name: 'Anodised',
        value: 5000,
      },
      {
      	
      	name: 'Red',
        value: 5000,
      },
      {
      	name: 'Black',
        value: 5000,
      },
      {
      	name: 'Chrome',
        value: 5200,
      },
    ],
  },
  
  computed: {
    selectedCash() {
    	if (!(false === this.cash)) {
      	return this.currency[this.cash];
      }
      return false;
    },
    selectedItem() {
    	if (!(false === this.cash)) {
      	return this.prices[this.item];
      }
      return false;
    },
  }
})