tripcollor
@tripcollor

Как сделать чтобы vue js при слежении за изменениями автоматически выдавал результат сложного расчета (пример внутри)?

Есть вот такой код, это упрощенный прототип калькулятора (я упростил для понимания), но проблема здесь видна. При запуске страницы подсчет выводится правильно, но при изменении параметров в инпутах перерасчет уже не происходит, подскажите в чем дело. И да я решил эту проблему через шаблон я уже в нем непосредственно совершил все математические операции но на реальном проекте это громоздко и хотелось бы делать все в функции скрипта vue js

<!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>
  • Вопрос задан
  • 671 просмотр
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
В примере результат никак не зависит от значений param1 и param2. Поэтому при их изменении ничего не меняется.

Можно упростить всю логику. Убрать watch и created, оставить единственную функцию computed: resultAll, в которой и производить все вычисления. Примерно так: 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
      };
    }
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы