從另一個組件計算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>

來源

2017-04-21 Karl Wong

那麼最簡單的方法是保持將被用於外部對象計算的值，然後，你需要做的的計算到位使用它們從該對象。 –

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

來源

2017-04-21 10:39:20 C2486

我想你錯了我的問題，我想計算sub_total ... –

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

我不知道如果我理解正確，但使用全局在這種情況下，公交巴士可能會有幫助。

事件總線/發佈 - 訂閱模式，儘管它有時得到不好的按壓，仍然是讓應用程序的不相關部分彼此交談的極好方式。

這裏的article

來源

2017-04-21 11:59:50

從另一個組件計算VueJs

回答

相關問題