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

131
21 января 2020, 05:10

Хочу сделать калькулятор для расчета размера арматуры на vue.js. При изменении веса должна вычисляться длина, а при изменении длины вес. Но так как здесь имеются общие данные, то, например, после вычисления длины сразу же происходит перевычисление веса. А так же при добавлении второго метода, для вычисления веса, нельзя менять значение в поле с длиной.

https://jsfiddle.net/6t5qokc9/

// 'Диматер арматуры' => 'пропорция'
// Для вычисления массы в кг нужно умножить на пропорцию
// Для вычисления длины в метрах нужно разделить на пропорцию
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
}
var calc = new Vue({
el: '#calc',
data: {
    selected: 'Выберите диаметр',
    kilo: 1,
    metr: 1,
    armatura: armatura
},
methods: {
    calcMetr: function(selected, kilo) {
        selected = +selected;
        this.metr = kilo * armatura[selected];
        this.metr.toFixed(3);
    },
    // calcKg: function(selected, metr) {
    //     selected = +selected;
    //     this.kilo = metr / armatura[selected];
    //     this.kilo.toFixed(3);
    // }
    },
})
Answer 1

Используйте watch. Т.е. при изменении параметра вес производите вычисления длины, а при изменении параметра длина - вычисления веса арматуры.

Пояснение:

watch: {
    kilo() { /* Формула для вычисления длины */ },
    metr() { /* Формула для вычисления веса */ }
}
Answer 2

Нужно использовать событие change, или как в моем решение сделать проверку на каком элементе был фокус в последний раз. https://jsfiddle.net/46gwcphq/

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()
        }
    }
})
READ ALSO
Рекурсивное создание полей теста

Рекурсивное создание полей теста

Я пытаюсь динамически создать тест по кнопкеДобавил функцию

103
Как в JS создать событие по нажатию на radio button

Как в JS создать событие по нажатию на radio button

Как в js сделать так, чтобы при нажатии на любой input type="radio" переходило на следующий вопрос, то есть чтобы было аналогично нажатию кнопки "Далее"...

126
Как достать из json содержимое? [закрыт]

Как достать из json содержимое? [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

126
Триггер для двух БД MySQL

Триггер для двух БД MySQL

Есть простая задача: при внесении новой строки в таблицу одной базы данных, вставлять ту же строку в таблицу другой базы

150