How to make vue js automatically give the result of a complex calculation when tracking changes (example inside)?

T

tripcollor2018-07-05 18:59:45

JavaScript

tripcollor, 2018-07-05 18:59:45

There is such a code, this is a simplified prototype of the calculator (I simplified it for understanding), but the problem is visible here. When the page is launched, the calculation is displayed correctly, but when changing the parameters in the inputs, the recalculation no longer occurs, tell me what's wrong. And yes, I solved this problem through a template, I already performed all the mathematical operations directly in it, but on a real project it is cumbersome and I would like to do everything in the vue js script function

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app1">
    <input type="number" v-model="param1">
    <input type="number" v-model="param2">
    <ul>
      <li>{{ resultAll.one }}</li>
      <li>{{ resultAll.two }}</li>
      <li>{{ resultAll.three }}</li>
    </ul>
  </div>


  <script>
    var app = new Vue({
      el: '#app1',
      data: {
        param1: 3100,
        param2: 200,

        params1: {
          one: 100,
          two: 200,
          three: 500,
        },

        params2: {
          one: 880,
          two: 560,
          three: 930,
        },

        resultParams1: {},
        resultParams2: {},

        resultAll: {}

      },
      created: function () {
        this.calcResultParams1;
        this.calcResultParams2;
        this.calcResultAll;
      },
      watch: {
        param1: function() {
          this.calcResultParams1;
          this.calcResultAll;
        },
        param1: function() {
          this.calcResultParams2;
          this.calcResultAll;
        }
      },
      computed: {
        calcResultParams1: function() {
          for(let i in this.params1) {
            this.resultParams1[i] = (this.params1[i] * 100) / 17;
          }
        },
        calcResultParams2: function() {
          for(let i in this.params2) {
            this.resultParams2[i] = (this.params2[i] * 100) / 20;
          }
        },
        calcResultAll: function() {
          for(let i in this.resultParams1) {
            this.resultAll[i] = this.resultParams2[i] + this.resultParams1[i];
          }
        }
      }
    });
  </script>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Sergey Sokolov, 2018-07-05
@tripcollor

In the example, the result does not depend on the values of param1and param2. Therefore, when they change, nothing changes.
You can simplify the whole logic. Remove watch and created, leave the only function computed: resultAll, in which to perform all calculations. Something like this: Fiddle .

var app = new Vue({
  el: '#app1',
  data: {
    param1: 3100,
    param2: 200,
  },
  
  computed: {
    resultAll: function() {
      var p1 = this.param1
         ,p2 = this.param2
      ;
      return {
      	one: p1 * 2,
        two: p2 * 3,
        three: p1 + p2
      };
    }
  }
});