Question

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

<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>

Answer 1

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

＆＃13;

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++;
        //     }
        // }


    });

＆＃13;

input{
  width : 60px;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

这里是article

从另一个组件VueJs计算

2 个答案: