메서드 --> 액션 --> 변환 --> 상태 문제

메서드 --> 액션 --> 변환 --> 상태 문제

매개 변수를 사용하여 중첩된 특정 수준의 각 요소에 반복적으로 JSON을 삽입해야 하는 기능은 반환된 첫 번째 개체를 복제하여 각 중첩된 매개 변수에 삽입하는 것입니다.아래 스크린샷과 코드를 보고 제가 하고 있는 일을 느껴보세요.

기본적으로 상태 내에 중첩된 JSON 개체가 있으며 API에서 JSON을 반환하는 액션과 상태를 갱신하는 변환을 사용하여 기존 개체의 각 '행' 중첩된 속성에 반복적으로 추가해야 합니다.

문제는 내 생각에 돌연변이에 있다.API에서 반환된 첫 번째 JSON 오브젝트를 복제하는 기능이 있다고 추측했습니다.JSON의 API 함수 및 구조와 함께 아래의 Action 및 Mutation 함수를 참조하십시오.

http://api.capecodcommission.org/docs/index.html#sumofannualcapitaltotalsfortreatment

v-for를 사용하여 실행되는 특정 구성 요소 내 기능:

methods: {
    costTotal () {
      return this.updateFinTotals(this.treatment.treatmentId,this.costType.treatTotal,this.costType.financeOption,this.treatment.relativeStartYear,this.costType.finDur,this.costType.prinFor)
    }
  }

기능 실행 중, JSON 보기:

<td class="text-center">
    {{ costTotal  }}
    {{ costType.annualized.sumOfAnnualCapitalTotals }}
</td>

V-for 루프:

<tbody>
    <tr v-for="(index, costType) in treatment.costTypes | filterBy 'true' in 'financeable'" is="cost-type-table-row-finance" :cost-type="costType"></tr> 
</tbody>

API 함수:

getSumOfAnnualCapitalTotals (treatmentId, costToFinance, financeOption, relativeStartYear, financeDuration, principalForgivenessRate) {
    let data = {
      treatmentId: treatmentId,
      costToFinance: costToFinance,
      financeOption: financeOption,
      relativeStartYear: relativeStartYear,
      financeDuration: financeDuration,
      principalForgivenessRate: principalForgivenessRate
    } 

    return Vue.http.post(API_ROOT + 'sumOfAnnualCapitalTotalsForTreatment', data)
  }

액션: API에서 JSON을 꺼내 변환 함수를 디스패치합니다.

export const updateFinTotals = function ({ dispatch, state }, treatmentId, costToFinance, financeOption, relativeStartYear, financeDuration, principalForgivenessRate) {

  api.getSumOfAnnualCapitalTotals( treatmentId, costToFinance, financeOption, relativeStartYear, financeDuration, principalForgivenessRate ).then(function (response) {

    dispatch('UPDATE_ANNUALIZED', response.data)

  }, function (response) {

    console.log(response)
  })
}

변환:JSON을 사용하여 상태를 업데이트합니다.

UPDATE_ANNUALIZED (state, annualized) {
    for (var i = 0; i < state.scenario.treatments.length; i++) {
      for (var j = 0; j < state.scenario.treatments[i].costTypes.length; j++) {
        state.scenario.treatments[i].costTypes[j]["annualized"] = annualized
      }
    }
  }

편집: 아래 그림

컴포넌트: http://i.imgur.com/lcS5Fgo.jpg

JSON 구조: http://i.imgur.com/AsANZOp.jpg

API는 하나의 값을 반환합니다(하나의 비용 유형으로 하나의 처리).

링크된 API 문서의 예:

{"sumOfAnnualCapitalTotals":150374.9849625}

단, 변환에 for 루프가 있는 모든 처리의 모든 비용유형에 할당합니다.

for (var i = 0; i < state.scenario.treatments.length; i++) {
  for (var j = 0; j < state.scenario.treatments[i].costTypes.length; j++) {
    state.scenario.treatments[i].costTypes[j]["annualized"] = annualized
  }
}

당신이 해야 할 일은 그 일을 하는 것이다treatmentID그리고 비용 타입(내가 셜록홀딩이라고 부르는 것)이 있다.costToFinance)를 액션에서 변환으로 변환한 후 일치하는 객체의 상태를 필터링하고 다음 내용만 업데이트합니다.

UPDATE_ANNUALIZED (state, treadmentId, costToFinance, annualized) {

  const treatment = state.treatments.find((t) => t.treatmentId === treatmentId)

  const currCostType = treatment.costTypes.find((costType) => costType.Id === costToFinance)

  currCostType.annualized = annualized
}

문제는 JSON이 costTypes의 ID를 가지고 있지 않다는 것입니다.find하지만 그건 네가 알아내야 해

언급URL : https://stackoverflow.com/questions/38397728/method-action-mutation-state-issue