Хочу сделать калькулятор для расчета размера арматуры на 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);
// }
},
})
Используйте watch. Т.е. при изменении параметра вес производите вычисления длины, а при изменении параметра длина - вычисления веса арматуры.
Пояснение:
watch: {
kilo() { /* Формула для вычисления длины */ },
metr() { /* Формула для вычисления веса */ }
}
Нужно использовать событие 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()
}
}
})
Виртуальный выделенный сервер (VDS) становится отличным выбором
Как в js сделать так, чтобы при нажатии на любой input type="radio" переходило на следующий вопрос, то есть чтобы было аналогично нажатию кнопки "Далее"...
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение
Есть простая задача: при внесении новой строки в таблицу одной базы данных, вставлять ту же строку в таблицу другой базы