2

我的函数应该使用自身的参数将 JSON 迭代地插入到特定级别的嵌套 JSON 的每个元素中，它复制了返回的第一个对象并将其插入到每个嵌套参数中。请参阅下面的屏幕截图和代码，以了解我在做什么。

基本上，我在状态中有一个嵌套的 JSON 对象，并且需要使用从 API 返回 JSON 的操作然后更新状态的突变迭代地附加到现有对象的每个“行”的嵌套属性。

问题在于我认为的突变。我推断我的函数是复制从 API 返回的第一个 JSON 对象。请参阅下面的 Action 和 Mutation 函数，以及 JSON 的 API 函数和结构。

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>

接口函数：

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

4

1 回答 1

0

好吧，您的 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
  }
}

您应该做的是将treatmentIDand cost 类型（我叫 sherlock-holmed 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 似乎没有任何成本类型的 ID find，但这是由您自己弄清楚的。

于 2016-07-16T01:01:41.097 回答