vue的v-for循环添加tr，取tr中的某两个td进行运算

Question

我做一个页面，需要实现以下功能：
1、点击add按钮给表格动态添加一行tr（每行tr含13个td）
【需求1实现：<tr v-for="(value,key) in items" :id="key">...</tr>】
2、每行tr结尾有删除，点击任意行的删除按钮就删除该行整条数据
【需求2实现：this.items.splice(key, 1);】
3、选取每行tr的某两个td进行乘法运算，并把值赋给该行的结果td（请注意：tr为动态循环添加的）
【需求3未实现】
4、将每行的结果td的值全部做加法，并用控制台打印出总结果
【需求4未实现】

请大家帮我写下需求3和需求4的实现步骤，谢谢~

更新问题：需求全部解决了，实现方法如下：

（思路，代码不完全）

methods:

    addTr: function () {
        var trItem = {
            td1:"",
            td2:"",
            td3:"",
            ...
        };
        this.items.push(trItem);
    },
    deletes: function (key) {

        var totalMoney = 0;

        if(confirm('是否确认删除？')) {
            // 移除本行code
            this.items.splice(key, 1);     // this.items.$remove(item); ES6写法
            // 计算移除某条数据后的总金额
            for (var i = 0; i < this.items.length; i++) {
                totalMoney += parseFloat(this.items[i].td10);
            }
            this.endPrice1.show = totalMoney.toFixed(2);
        }else{
            // null
        }
    },
    multiply: function (item,key) {

        var totalMoney = 0;
        // 计算输入本行的总价
        item.td10 = (parseFloat(item.td8) * parseFloat(item.td9)).toFixed(2);
        // 判断结果是否为NaN
        if(isNaN(item.td10)){
            item.td10 = '0.00';
        }else{
            item.td10 = item.td10;
        }
        // for循环计算总金额
        for (var i = 0; i < this.items.length; i++) {
            totalMoney += parseFloat(this.items[i].td10);
        }
        this.endPrice1.show = totalMoney.toFixed(2);
    }

表格是用v-for循环tr出来的：

            <thead>
                <tr>
                    <th v-for="header in headers" style="text-align: center;" :id="header.id">{{ header.text }}</th>
                </tr>
            </thead>
            <tbody>
                <tr  v-for="(value,key) in items" :id="key">
                    <td style="display: none;">{{key+1}}</td>
                    <td><input type="text" name="amount" class="form-control" v-model="value.td8" @keyup="multiply(value,key)"/></td>
                    <td><input type="text" name="price" class="form-control" v-model="value.td9" @keyup="multiply(value,key)"/></td>
                    <td><input type="text" name="money"  class="form-control" disabled="disabled" v-model="value.td10"/></td>
                    <td @click="deletes(key)"><span class="glyphicon glyphicon-minus"></span></td>
                    ...
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="9" style="text-align: right;">总金额</th>
                    <th colspan="3" :class="endPrice1.class" :id="endPrice1.id">{{ endPrice1.show }}</th>
                </tr>
            </tfoot>

以上能实现点击add按钮添加tr、delete按钮移除数据、根据输入的值计算每行总价和全部总金额、删除某条数据总金额会相应减去总价。

Answer 1

需求三：不是直接就在{{}}里面运算么,input的话，用v-model绑定 https://vuefe.cn/v2/guide/for...

            <tr v-for='(value,key) in tests' :id="key">
                <td><input type="text" v-model="value.v1"></td>
                <td><input type="text" v-model="value.v2"></td>
                <td>{{value.v1*value.v2}}</td>
            </tr>

需求四：定一个计算属性可以吧

            <tr v-for='(value,key) in items' :id="key">
                <td><input type="text" v-model="value.v1"></td>
                <td><input type="text" v-model="value.v2"></td>
                <td>{{value.v1*value.v2}}</td>
            </tr>
            
            <p>{{sum}}</p>
//js部分
computed: {
  sum: function () {
    //return 对items的一个计算，懒得算了- -
    return 
  }
}

Answer 2

您好 请问 v-for="(value,key) in items"中的items怎么定义?