2

ネストされた JSON の特定のレベルの各要素に、それ自体のパラメーターを使用して JSON を繰り返し挿入することになっている私の関数は、返された最初のオブジェクトを複製し、それを各ネストされたパラメーターに挿入しています。以下のスクリーンショットとコードを参照して、私が何をしているのかを感じてください。

基本的に、状態内にネストされた JSON オブジェクトがあり、API から JSON を返すアクションと状態を更新するミューテーションを使用して、既存のオブジェクトの各「行」のネストされたプロパティに繰り返し追加する必要があります。

問題は突然変異の中にあると思います。私の関数は、API から返された最初の JSON オブジェクトを複製していると推測しました。API 関数および JSON の構造とともに、以下の Action および Mutation 関数を参照してください。

http://api.capecodcommission.org/docs/index.html#sumofannualcapitaltotalsfor Treatment

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)
  })
}

Mutation: 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

4

1 に答える 1

0

さて、あなたの API は1 つの値を返します ( 1 つの処理の 1つのコスト タイプに対して)

リンクされた 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ミューテーションに and コスト型 (私はシャーロック・ホルムズと呼ばれています) を渡し、一致するオブジェクトの状態をフィルタリングし、それのみを更新することです: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それはあなたが理解することです。

于 2016-07-16T01:01:41.097 に答える