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>

再次，我要在此处实现的结果是始终对每个working_capital对象的yearlyFinancials属性进行计算和建模，因为我将每个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>

使用v模型获取方法的结果

1 个答案: