Compute von einer anderen Komponente VueJs

Question

Ich habe eine Komponente, die Einheitspreis, Menge hält und eine Gesamtsumme in der Ansicht berechnen möchte, die nicht innerhalb der Komponente ist. Was kann ich tun, um das zu erreichen? Jede Komponente wird dynamisch generiert, hier ist ein Beispielcode. Danke!

<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

etwas tun, ich nur berechnete Teil hinzugefügt haben, können Sie in Geige bearbeiten: 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/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>

Answer 2

Ich bin nicht sicher, ob ich das richtig verstanden, aber eine globale Verwendung Event-Bus kann in solchen Situationen hilfreich sein.

Die Veranstaltung Bus/Publish-Subscribe-Muster, trotz der schlechten Presse manchmal wird es, ist immer noch eine hervorragende Möglichkeit, unabhängige Teile Ihrer Anwendung immer miteinander zu reden.

Hier ist der article