Калькулятор размера арматуры на vue.js

скрипт не работает никак не могу понять в html патключаю vue js но ничево

var calc = new Vue({
    el: '#calc',

    data: {
        selected: '6',
        kilo: 1,
        metr: 0.617,
        focus: 'kg', // Определяет элемент который изменяем
    },

    methods: {
        focusKg: function() {
            this.focus = 'kg'
        },
        focusMetr: function() {
            this.focus = 'metr'
        },
        calcKilo: function() {
            if (this.focus == 'metr') {
                var selected = +this.selected // Приводим строку к числу
                this.kilo = Number((this.metr * armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
            }
        },
        cakcMetr: function() {
            if (this.focus == 'kg') {
                var selected = +this.selected // Приводим строку к числу
                this.metr = Number((this.kilo / armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
            }
        }
    },
    watch: {
        kilo: function() {
            this.cakcMetr()
        },
        metr: function() {
            this.calcKilo()
        },
        selected: function() {
            this.calcKilo()
            this.cakcMetr()
        }
    }
})

// 'Диматер арматуры' => 'пропорция'
// Для вычисления массы в кг нужно умножить на пропорцию
// Для вычисления длины в метрах нужно разделить на пропорцию
var armatura = {
    6: 0.222,
    8: 0.395,
    10: 0.617,
    12: 0.888,
    14: 1.21,
    16: 1.58,
    18: 2,
    20: 2.47,
    22: 2.98,
    25: 3.85,
    28: 4.83,
    32: 6.31,
    36: 7.99,
    40: 9.87,
    41:10.364,
    42 :  10.364 ,
43 :   10.876 ,
44 :   11.4 ,
45 :    11.936,
46 :    12.485,
47 :   13.046 ,
48 :    13.619,
49 :    14.205,
50 :    15.413,
52 :    16.671,
53 :    17.319,
54 :    17.78,
55 :    18.65,
56 :    19.335,
58 :    20.74,
60 :    22.195,
62 :    23.7,
63 :    24.47,
65 :    26.049,
67 :    27.676,
68 :    28.509,
70 :    30.21,
72 :    31.961,
75 :    34.68,
78 :    37.51,
80 :    39.458,
82 :    41.456,
85 :    44.545,
87 :    46.666,
90 :    49.94,
92 :    52.184,
95 :    55.643,
97 :    58.01,
100 :   61.654 
    
    
]}
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.problems-calc {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  max-width: 388px;
  width: 100%;
}

.problems-calc__title {
  margin-top: 0px;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 25px;
  color: #fff;
}

.calc-inputs {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

.calc-kg,
.calc-metr {
  display: flex;
  flex-direction: column;
  max-width: 184px;
  width: 100%;
}

.calc-kg input,
.calc-metr input {
  font-size: 15px;
  padding: 11px 15px;
  border-radius: 5px;
  background-color: #F0F0F0;
  border: 1px solid rgba(0, 0, 0, 0.22);
}

.calc-diam {
  font-size: 15px;
  padding: 11px 15px;
  border-radius: 5px;
  background-color: #F0F0F0;
  border: 1px solid rgba(0, 0, 0, 0.22);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="problems-calc" id="calc">
                    <h4 class="problems-calc__title text-center">Воспользуйтесь калькулятором</h4>
                    <select v-model="selected" name="diam" id="diam" class="calc-diam">
                        <option selected disabled hidden>Выберите диаметр</option>
                        <option value="6">6 мм</option>
                        <option value="8">8 мм</option>
                        <option value="10">10 мм</option>
                        <option value="12">12 мм</option>
                        <option value="14">14 мм</option>
                        <option value="16">16 мм</option>
                        <option value="18">18 мм</option>
                        <option value="20">20 мм</option>
                        <option value="22">22 мм</option>
                        <option value="25">25 мм</option>
                        <option value="28">28 мм</option>
                        <option value="32">32 мм</option>
                        <option value="36">36 мм</option>
                        <option value="40">40 мм</option>
                        <option value="41">41 მ</option>
                        <option value="41">41 მ</option>
                        <option value="42 ">42 მ</option>
                        <option value="43 ">43 მ</option>
                        <option value="44 ">44 მ</option>
                        <option value="45 ">45 მ</option>
                        <option value="46 ">46 მ</option>
                        <option value="47 ">47 მ</option>
                        <option value="48 ">48 მ</option>
                        <option value="49 ">49 მ</option>
                        <option value="50 ">50 მ</option>
                        <option value="52 ">52 მ</option>
                        <option value="53 ">53 მ</option>
                        <option value="54 ">54 მ</option>
                        <option value="55 ">55 მ</option>
                        <option value="56 ">56 მ</option>
                        <option value="58 ">58 მ</option>
                        <option value="60 ">60 მ</option>
                        <option value="62 ">62 მ</option>
                        <option value="63 ">63 მ</option>
                        <option value="65 ">65 მ</option>
                        <option value="67 ">67 მ</option>
                        <option value="68 ">68 მ</option>
                        <option value="70 ">70 მ</option>
                        <option value="72 ">72 მ</option>
                        <option value="75 ">75 მ</option>
                        <option value="78 ">78 მ</option>
                        <option value="80 ">80 მ</option>
                        <option value="82 ">82 მ</option>
                        <option value="85 ">85 მ</option>
                        <option value="87 ">87 მ</option>
                        <option value="90 ">90 მ</option>
                        <option value="92 ">92 მ</option>
                        <option value="95">95 მ</option> 
                        <option value="97 ">97 მ</option>
                        <option value="100">100 მ</option>
                    </select>
                    <div class="calc-inputs">
                        <div class="calc-kg">
                            <span>Килограммы:</span>
                            <input @focus="focusKg" v-model="kilo" type="number">
                        </div>
                        <div class="calc-metr">
                            <span>Метры:</span>
                            <input @focus="focusMetr" v-model="metr" type="number">
                        </div>
                    </div>
                </div>


Ответы (1 шт):

Автор решения: Denis640Kb

Вот работающее решение(протестировано):

    var calc = new Vue({
        el: '#calc',

        data: {
            selected: '6',
            kilo: 1,
            metr: 0.617,
            focus: 'kg', // Определяет элемент который изменяем
        },

        methods: {
            focusKg: function() {
                this.focus = 'kg'
            },
            focusMetr: function() {
                this.focus = 'metr'
            },
            calcKilo: function() {
                if (this.focus == 'metr') {
                    var selected = +this.selected // Приводим строку к числу
                    this.kilo = Number((this.metr * armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
                }
            },
            cakcMetr: function() {
                if (this.focus == 'kg') {
                    var selected = +this.selected // Приводим строку к числу
                    this.metr = Number((this.kilo / armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
                }
            }
        },
        watch: {
            kilo: function() {
                this.cakcMetr()
            },
            metr: function() {
                this.calcKilo()
            },
            selected: function() {
                this.calcKilo();
                this.cakcMetr()
            }
        }
    });

    // 'Диматер арматуры' => 'пропорция'
    // Для вычисления массы в кг нужно умножить на пропорцию
    // Для вычисления длины в метрах нужно разделить на пропорцию
    var armatura = {
        6: 0.222,
        8: 0.395,
        10: 0.617,
        12: 0.888,
        14: 1.21,
        16: 1.58,
        18: 2,
        20: 2.47,
        22: 2.98,
        25: 3.85,
        28: 4.83,
        32: 6.31,
        36: 7.99,
        40: 9.87,
        41:10.364,
        42 :  10.364 ,
        43 :   10.876 ,
        44 :   11.4 ,
        45 :    11.936,
        46 :    12.485,
        47 :   13.046 ,
        48 :    13.619,
        49 :    14.205,
        50 :    15.413,
        52 :    16.671,
        53 :    17.319,
        54 :    17.78,
        55 :    18.65,
        56 :    19.335,
        58 :    20.74,
        60 :    22.195,
        62 :    23.7,
        63 :    24.47,
        65 :    26.049,
        67 :    27.676,
        68 :    28.509,
        70 :    30.21,
        72 :    31.961,
        75 :    34.68,
        78 :    37.51,
        80 :    39.458,
        82 :    41.456,
        85 :    44.545,
        87 :    46.666,
        90 :    49.94,
        92 :    52.184,
        95 :    55.643,
        97 :    58.01,
        100 :   61.654
    }
    body {
        background: #20262E;
        padding: 20px;
        font-family: Helvetica;
    }

    .problems-calc {
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        max-width: 388px;
        width: 100%;
    }

    .problems-calc__title {
        margin-top: 0px;
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 25px;
        color: #fff;
    }

    .calc-inputs {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: #fff;
    }

    .calc-kg,
    .calc-metr {
        display: flex;
        flex-direction: column;
        max-width: 184px;
        width: 100%;
    }

    .calc-kg input,
    .calc-metr input {
        font-size: 15px;
        padding: 11px 15px;
        border-radius: 5px;
        background-color: #F0F0F0;
        border: 1px solid rgba(0, 0, 0, 0.22);
    }

    .calc-diam {
        font-size: 15px;
        padding: 11px 15px;
        border-radius: 5px;
        background-color: #F0F0F0;
        border: 1px solid rgba(0, 0, 0, 0.22);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="problems-calc" id="calc">
    <h4 class="problems-calc__title text-center">Воспользуйтесь калькулятором</h4>
    <select v-model="selected" name="diam" id="diam" class="calc-diam">
        <option selected disabled hidden>Выберите диаметр</option>
        <option value="6">6 мм</option>
        <option value="8">8 мм</option>
        <option value="10">10 мм</option>
        <option value="12">12 мм</option>
        <option value="14">14 мм</option>
        <option value="16">16 мм</option>
        <option value="18">18 мм</option>
        <option value="20">20 мм</option>
        <option value="22">22 мм</option>
        <option value="25">25 мм</option>
        <option value="28">28 мм</option>
        <option value="32">32 мм</option>
        <option value="36">36 мм</option>
        <option value="40">40 мм</option>
        <option value="41">41 მ</option>
        <option value="41">41 მ</option>
        <option value="42 ">42 მ</option>
        <option value="43 ">43 მ</option>
        <option value="44 ">44 მ</option>
        <option value="45 ">45 მ</option>
        <option value="46 ">46 მ</option>
        <option value="47 ">47 მ</option>
        <option value="48 ">48 მ</option>
        <option value="49 ">49 მ</option>
        <option value="50 ">50 მ</option>
        <option value="52 ">52 მ</option>
        <option value="53 ">53 მ</option>
        <option value="54 ">54 მ</option>
        <option value="55 ">55 მ</option>
        <option value="56 ">56 მ</option>
        <option value="58 ">58 მ</option>
        <option value="60 ">60 მ</option>
        <option value="62 ">62 მ</option>
        <option value="63 ">63 მ</option>
        <option value="65 ">65 მ</option>
        <option value="67 ">67 მ</option>
        <option value="68 ">68 მ</option>
        <option value="70 ">70 მ</option>
        <option value="72 ">72 მ</option>
        <option value="75 ">75 მ</option>
        <option value="78 ">78 მ</option>
        <option value="80 ">80 მ</option>
        <option value="82 ">82 მ</option>
        <option value="85 ">85 მ</option>
        <option value="87 ">87 მ</option>
        <option value="90 ">90 მ</option>
        <option value="92 ">92 მ</option>
        <option value="95">95 მ</option>
        <option value="97 ">97 მ</option>
        <option value="100">100 მ</option>
    </select>
    <div class="calc-inputs">
        <div class="calc-kg">
            <span>Килограммы:</span>
            <input @focus="focusKg" v-model="kilo" type="number">
        </div>
        <div class="calc-metr">
            <span>Метры:</span>
            <input @focus="focusMetr" v-model="metr" type="number">
        </div>
    </div>
</div>

→ Ссылка