从另一个组件计算VueJs

问题描述：

我有一个组件，其中包含单位价格，数量并希望计算不在组件内部的总计。我能做些什么来实现这一目标？每个组件都是动态生成的，下面是一个示例代码。谢谢！从另一个组件计算VueJs

<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所有组件都是动态生成的，是否可以重新循环它们来计算？ –

答

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

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

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

 
     methods:{ 
 
      remove: function(index){ 
 
      \t \t if (index > -1) { 
 
    \t \t \t \t \t \t \t this.item_rows.splice(index, 1); 
 
\t \t \t \t \t \t \t \t } 
 
       console.log(item); 
 
      }, 
 
      add:function(){ 
 
      \t 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){ 
 
        \t \t \t 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/[email protected]/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 ... –

@KarlWong：我已经更新了我的答案。 – C2486

答

我不知道如果我理解正确，但使用全局在这种情况下，公交巴士可能会有帮助。

事件总线/发布 - 订阅模式，尽管它有时得到不好的按压，仍然是让应用程序的不相关部分彼此交谈的极好方式。

这里的article

从另一个组件计算VueJs

相关推荐