<!-- FONTS -->

<!-- PAGE STUFF -->
<div id="app">
    
<!-- <select v-model="p1">
  <option disabled value="">Выберите один из вариантов</option>
  <option value="15">А-10</option>
  <option value="25">А-20</option>
  <option value="35">А-30</option>
  <option value="45">А-40</option>
</select> -->
    
<select v-model="selected">
  <option v-for="option in options" :value="option">
    {{ option.text }}
  </option>
</select>
    
    <input
  type="number"
  placeholder="Ширина"
  name="width"
  v-model="width"
  v-on:input="area = width * lenght">
<input
  type="number"
  placeholder="Длина"
  name="lenght"
  v-model="lenght"
  v-on:input="area = width * lenght">
<br>
    
    <span>{{ text1 }}{{ getArea }}</span><br>
<span>{{ text2 }}{{ getCount }}</span><br>
    <span>Цена: {{ getCost }}</span>
    <br>
    ---------------------
    <br>
    
 

    
</div>

// --- COLORS ---

// Positioning Mixin
setup(pos, top = null, right = null, bottom = null, left = null)
    position pos
    top top
    left left
    right right
    bottom bottom

// --- SETUP STUFF ---
* { box-sizing: border-box; transition: 0.3s cubic-bezier(0.6,0,0.2,1); }
.abs-center { setup(absolute,50%,null,null,50%); transform: translate(-50%, -50%); }
.vert-center { setup(absolute,50%); transform: translateY(-50%); }
.horz-center { setup(absolute,null,null,null,50%); transform: translateX(-50%); }
.rela-block { display: block; position: relative; }
.rela-inline { display: inline-block; position: relative; }
.left { position: relative; float: left; }
.right { position: relative; float: right; }

body { transition: 0s; }

// --- PAGE STYLING ---

// --- Notes ---
var app = new Vue({
    el: '#app',
    data() {
        return {
            item: '',
            text1: 'Площадь: ',
            text2: 'Колличество: ',
            width: 10,
            lenght: 10,
            area: 0,
            count: 0,
            cost: 0,
            
            selected: { },
            options: [
              { text: 'A-10', area: 10, price: 100 },
              { text: 'A-12', area: 12, price: 200 },
              { text: 'A-14', area: 14, price: 300 }
            ]
 
        }
    },
    computed: {
        getArea() {
            return this.width * this.lenght  || 0;
        },
        getCost() {
            return this.getCount * this.selected.price || 0;
        },
        getCount() {
            return this.getArea / this.selected.area || 0;
        }
    },
    created() {
        this.selected = this.options[0]
    }
    //methods: {}
});