从另一个组件 VueJs 计算答案

【问题标题】：Compute from another component VueJs从另一个组件 VueJs 计算
【发布时间】：2017-04-21 10:16:22
【问题描述】：

我有一个组件，它保存单价、数量，并希望在视图中计算一个总计，但该视图不在组件内部。我能做些什么来实现这一目标？每个组件都是动态生成的，这里有一个示例代码。谢谢！

<table>
<tr is="item-grid" v-for='index in counter'></tr>
<tr><td v-text="sub_total"></td></tr>
<button @click="counter++" type="button">TEST ADD ROW</button>
</table>


<template id="item-template">
    <tr>
        <td><input type="text" class="form-control" v-model="inventory_name" readonly/></td>
        <td><input type="text" class="form-control" v-model="sku"/></td>
        <td><input type="text" class="form-control" v-model="qty"/></td>
        <td><input v-model="unit_price"></input></td>
        <td><span v-text="unit_total"></span></td>
        <td><button @click="remove(this)" type="button">delete</button></td>
    </tr>
</template>


<script>

    var Item = {
        template: '#item-template',

        data: function(){
            return {'qty': 0, 'unit_price': 0.00, 'inventory_name': '', 'sku': ''}
        },

        methods:{
            remove: function(a){
                console.log(a);
            }
        },

        computed: {
            unit_total: function(){
                return this.qty * this.unit_price;
            }
        }

    }

    new Vue({
        el: '#app',

        props: ['item','sub_total','tax','grand_total'],

        data: {
            'counter': 1,
        },

        components: {
            'item-grid': Item,
        },

        // computed: {
        //     sub_total: function(){
        //         return Item.unit_total++;
        //     }
        // }


    });
</script>

【问题讨论】：

嗯，最简单的方法是将用于计算的值保留在外部对象中，然后在需要进行计算的地方使用该对象中的值。
@BelminBedak 所有组件都是动态生成的，是否可以重新循环计算？

标签： php vue.js vuejs2

【解决方案1】：

做这样的事情，我只添加了计算部分，你可以在小提琴中编辑：https://jsfiddle.net/rdjjpc7a/3003/

var Item = {
        template: '#item-template',

        data: function(){
            return {
            	item_rows:[{'qty': 0, 'unit_price': 0.00, 'inventory_name': '', 'sku': ''}]
            }
        },

        methods:{
            remove: function(index){
            		if (index > -1) {
    							this.item_rows.splice(index, 1);
								}
                console.log(item);
            },
            add:function(){
            	this.item_rows.push({'qty': 0, 'unit_price': 0.00, 'inventory_name': '', 'sku': ''});
            }
        },

        computed: {
            unit_total: function(){
                return this.qty * this.unit_price;
            },
            sub_total: function(){
                 var subTotal=0;
                 this.item_rows.map(function(item){
                    if(item.qty>0 && item.unit_price > 0){
                 			subTotal += item.qty*item.unit_price;
                    }
                 });
                 return subTotal;
            }
            
        }

    }

    new Vue({
        el: '#app',

        props: ['item','sub_total','tax','grand_total'],

        data: {
            'counter': 1,
        },

        components: {
            'item-grid': Item,
        },

        // computed: {
        //     sub_total: function(){
        //         return Item.unit_total++;
        //     }
        // }


    });

input{
  width : 60px;
}

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
<item-grid></item-grid>
</div>
<template id="item-template">
    <table>
    <tr v-for="(item,index) in item_rows">
        <td><input type="text" class="form-control" v-model="item.inventory_name" readonly/></td>
        <td><input type="text" class="form-control" v-model="item.sku"/></td>
        <td><input type="text" class="form-control" v-model="item.qty"/></td>
        <td><input v-model="item.unit_price"></td>
        <td><span v-text="item.qty*item.unit_price"></span></td>
        <td><button @click="remove(index)" type="button">delete</button></td>
    </tr>
    <tr><td><button @click="add" type="button">Add Row</button></td><td colspan="3">Sub Total : {{sub_total}}</td></tr>
    </table>
</template>

【讨论】：

我想你弄错了我的问题，我想计算 sub_total...

【解决方案2】：

我不确定我是否理解正确，但在这种情况下使用全局事件总线可能会有所帮助。

事件总线/发布-订阅模式，尽管有时会受到负面报道，但仍然是让应用程序的不相关部分相互通信的绝佳方式。

这是article

【讨论】：