Access computed component properties in Vue from parent

Question

How do you access computed component properties in Vue from a parent?

In this example, I have a basket with component components, and I want to calculate and display the sum of the basket elements:

cart.js

var vm = new Vue({ el: '#cart', components: { cartItem: require('./components/cart-item.js'), }, data: { items: [ { name: 'apple', qty: 5, price: 5.00 }, { name: 'orange', qty: 7, price; 6.00 }, ], }, computed: { // I want to do something like this and access lineTotal from cart cartTotal: function() { return this.items.reduce(function(prev,curr) { return prev + curr.lineTotal; }, 0) } } }); 

Cart-item.js

 module.exports = { template: require('./cart-item.template.html'), props: ['fruit'], computed: { lineTotal: function() { return this.fruit.price * this.fruit.qty; } }, }; 

main html

 <li v-for="item in items" is="cart-item" :fruit="item"> ... @{{ cartTotal }} 

How to access the lineTotal properties for each cart item to use when summarizing cartTotal ?

Note that I do not want to repeat the calculations performed in lineTotal , but instead use the calculated properties directly.

Answer 1

You must name the children, for example, using the v-ref directive. Then, from the parent, you resolve the children properties with this.$refs.mychild.myproperty