使用v模型獲取方法的結果

Question

我正在嘗試建立一個表，該表包含許多相互移動的零件和列。 在下面的示例中，我嘗試使每個轉發器項目的working_capital為(current_assets - current_liabilities)的計算。 我不能在此處使用computed ，因為計算需要能夠接受正在傳遞的對象的參數。 稍后（此代碼中未顯示），我需要在基於其他對象屬性（此代碼中未顯示）的百分比計算中使用working_capital的值，但是對此的答案將能夠解決此問題。 這是當前設置。 （注意：我整理了表格/ HTML和許多組件代碼，以使其更易於閱讀/回答）。

<template>
    <div class="container">
        <div class="financial-row" v-for="financial in yearlyFinancials">
            <input type="number" v-model="financial.current_assets" />
            <input type="number" v-model="financial.current_liabilities" />
            <input type="number" v-model="workingCapital(financial)" /> <!-- This line doesn't work / Somehow needs to be calculated AND modeled to use this value later -->
        </div>
    </div>
</template>

<script>
  module.exports = {
    data: function(){
      return {
          yearlyFinancials: [
              {
                  year: 2017,
                  current_assets: 340,
                  current_liabilities: 176,
                  working_capital: 0 // This needs to a calculated 
              },
              {
                  year: 2016,
                  current_assets: 360,
                  current_liabilities: 200,
                  working_capital: 0 // This needs to a calculated 
              }
          ]
      }
    },
    methods: {
        workingCapital: function(obj){
            return (obj.current_assets - obj.current_liabilities);
        }
    }
  }
</script>

再次，我要在此處實現的結果是始終對每個yearlyFinancials對象的working_capital屬性進行計算和建模，因為稍后將使用每個working_capital的值進行另一組計算。

朝着正確方向的任何觀點都會有很大幫助。 謝謝！

Answer 1

您可以創建一個計算屬性，用於計算workingCapital

calculatedyearlyFinancials() {
  return this.yearlyFinancials.map(item => {
    item.workingCapital = item.current_assets - item.current_liabilities
    return item
  })
}

在您的模板中：

    <div class="financial-row" v-for="financial of calculatedyearlyFinancials"> <!-- USE :key here -->
        <input type="number" v-model="financial.current_assets" />
        <input type="number" v-model="financial.current_liabilities" />
        <input type="number" v-model="financial.workingCapital" />
    </div>