vue计算动态添加的input的值

img


订单一初始化就在，订单二是点加号动态添加，在订单总计那里计算对应动态添加的input的值。求解答🙏

用计算属性，统计下数组项中中对应的值


简单示例如下

img

<div id="app">
    {{total}}
    <div v-for="item in arr">
        <div><input type="text" v-model="item.num" /></div>
        <div><input type="text" v-model="item.price" /></div>
        <div><input type="text" v-model="item.note" /></div>
        <hr />
    </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   vue= new Vue({
        el: '#app',
       data: { arr: [{ num: 0, price: 0, note: '' }, { num: 0, price: 0, note: '' }], sum:0},
       computed: {
           total: function () {
               var sum = 0;
               this.arr.forEach(i => { sum += (parseInt(i.num) || 0)*( parseFloat(i.price) || 0);  });
               return sum
           }
        }
    })

</script>

img

点击添加的方法里面遍历数组，把累加的值设置到总计哪里，双向绑定的，只要变量有值就会更新界面的，参考：

订单总计:{{变量名称1}}条，{{变量名称2}}元

在computed计算总价

  computed: {
        total () {
            let total = 0
           //循环订单数据，金额相加
        }
    }
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632