Vue: 계산된 속성이 하위 구성 요소로 전달되지 않음(콘솔은 "빈 문자열"을 기록함)

Vue: 계산된 속성이 하위 구성 요소로 전달되지 않음(콘솔은 "빈 문자열"을 기록함)

사용자 입력을 바탕으로 간단한 계산을 하기 위해 대시보드를 만들고 있습니다.구글에 여러 번 도움을 요청했지만 성공하지 못한 후, 제 희망은 당신이 저를 올바른 방향으로 인도해 주셨으면 하는 것입니다.

제 프로젝트가app.js파일에는 300줄의 코드가 포함되어 있습니다.여기서 모든 것을 복사/붙여넣는 대신 문제를 설명하고 Codepen 바이올린을 제공합니다.

Codepen 링크: https://codepen.io/bauhausweb/project/editor/ZqnkEO #

JS와 Vue는 모두 처음입니다. ES16, CLI 등이 아닌 온더플라이 코드 에디터(Codepen)를 사용하고 있습니다.구문은 이해하기 어렵기 때문에, 이 점에 유의해 주세요.

실제 문제:계산된 속성revenuesFirst,revenuesSecond그리고.totalCost컴포넌트 #1과 #2는 세 번째 컴포넌트로 넘어가지 않습니다.콘솔로 세 번째 컴포넌트 안에 로그인을 하면 결과는 다음과 같은 결과가 됩니다.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에서 앱을 재생하면 "Profits"의 최종 계산을 제외하고 모든 것이 정상적으로 작동합니다.

협조해 주셔서 감사합니다.

언급URL : https://stackoverflow.com/questions/59784984/vue-computed-property-not-passing-to-child-component-console-logs-empty-strin