Question

我试图对计算属性求和（有效地对表中的列求和），但它返回0（总净值 - 最后一列的底部）。请参阅小提琴：https://jsfiddle.net/2djreyds/我认为它与我如何引用计算属性有关。当然它简单！有任何想法吗？或者，如果有更聪明的方法，请告诉我！ :)谢谢！

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js Tutorial | More Computed Properties</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <div id="app" class="container">
      <div class="row">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Phase</th>
                        <th>Labour Budget</th>
                        <th>Labour Hours</th>
                        <th>Labour Cost Rate</th>
                        <th>Labour Cost</th>
                        <th>Overhead Cost</th>
                        <th>Net</th>
                    </tr>   
                </thead>
                <tbody>
                    <tr is="data-row" v-for="record in records" :record="record"></tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>Total Hours: {{totalHours}}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="alert alert-info">Total Net: {{totalNet}}</td>
                    <tr>
                </tbody>
            </table>
      </div>
    </div>
  </body>

  <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>

  <script type="text/x-template" id ="data-row">
    <tr>
        <td>{{record.phase}}</td>
        <td>{{record.labourBudget}}</td>
        <td><input type="number" v-model="record.labourHours"></td>
        <td><input type="number" v-model="record.labourCostRate"></td>
        <td>{{labourCost}}</td>
        <td>{{overheadCost}}</td>
        <td>{{net}}</td>
    <tr>
  </script>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        records: [
            {phase:"Phase1", labourBudget: 100, labourHours: 4, labourCostRate: 45},
            {phase:"Phase2", labourBudget: 100, labourHours: 2, labourCostRate: 42}
        ]
      },
      components:{
        'data-row':{
            template: "#data-row",
            props: ["record"],
            data:function(){
                return this.record;
            },
            computed:{
                 labourCost: function(){
                    return this.record.labourHours * this.record.labourCostRate;
                },
                overheadCost: function(){
                    return this.labourCost * 1.36;
                },
                net: function(){
                    return this.record.labourBudget-this.labourCost-this.overheadCost;
                }
            }
        }
      },
      computed:{
        totalHours: function(){
            var sum = 0;
            var items = this.records;
            for (var i in items){
                sum += items[i].labourHours;
            }
            return sum;
          },
        totalNet: function(){
            var sum = 0;
            var items = this.$children;
            for (var i in items){
                sum += items[i].overheadCost;
            }
            return sum;
          }
      }
    })
  </script>
</html>

＆＃13;

Vue.js 2 - 使用子组件的Sum Computed Properties

0 个答案: