I want to make a calculator to calculate the size of the armature on vue.js. When the weight changes, the length must be calculated, and when the length changes, the weight. But since there are general data here, for example, after calculating the length, the weight is immediately recalculated. As well as adding a second method to calculate the weight, you cannot change the value in the field with a length.

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); // } }, })
  • What is the question? - yar85

2 answers 2

Use watch . Those. when changing the weight parameter, make length calculations, and when the length parameter changes, calculate the weight of the reinforcement .

Explanation:

 watch: { kilo() { /* Π€ΠΎΡ€ΠΌΡƒΠ»Π° для вычислСния Π΄Π»ΠΈΠ½Ρ‹ */ }, metr() { /* Π€ΠΎΡ€ΠΌΡƒΠ»Π° для вычислСния вСса */ } }
  • But if I make a recalculation of the length, then immediately the recalculation of the weight will occur, and again the length ... it turns out a vicious circle. - Danil Lyamkin 3:17 pm
  • Really. Then you can hang the change handler on each field. watch will actually recurse. - Idushii
  • one
    Thank you, I am sure that this will work, but I did it myself in a similar way with a focus. I attach the ready decision. - Danil Lyamkin pm

You need to use the change event, or as in my decision to check on which element the focus was last time. 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() } } })