Vue: вычисляемое свойство не передается дочернему компоненту (консоль регистрирует «пустую строку») - PullRequest
Новая
       3

Vue: вычисляемое свойство не передается дочернему компоненту (консоль регистрирует «пустую строку»)

3 голосов
/ 17 января 2020

Я работаю над приборной панелью, чтобы сделать несколько простых расчетов на основе пользовательского ввода. После того, как я неоднократно просил Google, но безуспешно, помочь мне с моей проблемой, я надеюсь, что вы сможете указать мне верное направление.

Так как файл app.js моего проекта содержит 300 строк кода, я объясню проблему и предоставлю вам скрипту Codepen вместо того, чтобы копировать / вставлять все здесь.

Ссылка на Codepen: https://codepen.io/bauhausweb/project/editor/ZqnkEO#

Я новичок в JS и Vue, я играю с ним, используя редакторы кода на лету (Codepen), а не ES16, CLI и эти сложные вещи. Пожалуйста, имейте это в виду, когда публикуете свои ответы, так как я нахожу синтаксис достаточно сложным для понимания.

Фактическая проблема: Вычисленные свойства revenuesFirst, revenuesSecond и totalCost из компонентов # 1 и # 2 не передаются третьему компоненту. Когда я консоль регистрирую их в 3-м компоненте, в результате получается empty string, а когда приложение выполняет рендеринг, поля формы («Прибыль Y1» и «Прибыль Y2») отображают 0 вместо правильной суммы. Хотя внутри их соответствующих компонентов вычисленные свойства работают нормально.

Для удобства чтения я вставляю здесь только третий компонент, который ссылается на вычисленные свойства компонентов # 1 и # 2 как props. Пожалуйста, взгляните на Codepen, чтобы увидеть все приложение: https://codepen.io/bauhausweb/project/editor/ZqnkEO#

Vue.component('result-output', {
  props: ["revenuesFirst","revenuesSecond","totalCost"],
  data: function () {
    return {
      rF: this.revenuesFirst,
      rS: this.revenuesSecond,
      tC: this.totalCost
    }
  },
  computed: {
    calculatedProfitsY1: function(e) {
      let cp1 = this.rF - this.tC;
      return cp1;
    },
    calculatedProfitsY2: function(e) {
      let cp2 = this.rS - this.tC;
      return cp2;
    }
  },
  template: `<form action="">

          <h2>Profits</h2>

          <b-input-group size="sm" prepend="Profits Y1" class="mb-2">
            <b-form-input readonly v-bind:value="calculatedProfitsY1"></b-form-input>
            <b-input-group-append is-text>€</b-input-group-append>
          </b-input-group>

          <b-input-group size="sm" prepend="Profits Y2" class="mb-2">
            <b-form-input readonly v-bind:value="calculatedProfitsY2"></b-form-input>
            <b-input-group-append is-text>€</b-input-group-append>
          </b-input-group>

        </form>`
})

Почему вышеуказанного кода недостаточно для «импорта» / повторного использования / использования revenuesFirst, revenuesSecond и totalCost из первого и второго компонента в третий компонент <result-output></result-output>? Когда вы играете с приложением на Codepen , все работает отлично - за исключением для окончательного расчета "Прибыль".

Я благодарю вас за то, что вы взяли время помочь и оценить ваш вклад!

...