How do you access the puted properties of ponents in Vue from the parent?

In this example, I have a cart with item ponents and I want to pute and display the sum of the cart items:

cart.js

var vm = new Vue({

  el: '#cart',

  ponents: {
    cartItem: require('./ponents/cart-item.js'),
  },

  data: {
    items: [
      { name: 'apple', qty: 5, price: 5.00 },
      { name: 'orange', qty: 7, price; 6.00 },
    ],
  },

  puted: {
    // 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'],
    puted: {
      lineTotal: function() {
        return this.fruit.price * this.fruit.qty;
      }
    },
};

main html

<li v-for="item in items" is="cart-item" :fruit="item">

...

@{{ cartTotal }}

How do I access the lineTotal properties of each cart-item to use in summing cartTotal?

Note that I do not want to redo the calculations done in lineTotal but instead use the puted properties directly.

How do you access the puted properties of ponents in Vue from the parent?

In this example, I have a cart with item ponents and I want to pute and display the sum of the cart items:

cart.js

var vm = new Vue({

  el: '#cart',

  ponents: {
    cartItem: require('./ponents/cart-item.js'),
  },

  data: {
    items: [
      { name: 'apple', qty: 5, price: 5.00 },
      { name: 'orange', qty: 7, price; 6.00 },
    ],
  },

  puted: {
    // 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'],
    puted: {
      lineTotal: function() {
        return this.fruit.price * this.fruit.qty;
      }
    },
};

main html

<li v-for="item in items" is="cart-item" :fruit="item">

...

@{{ cartTotal }}

How do I access the lineTotal properties of each cart-item to use in summing cartTotal?

Note that I do not want to redo the calculations done in lineTotal but instead use the puted properties directly.

• javascript
• vue.js

• While @gurghet provided you with the technically correct answer, I would advise against accessing the childs for stuff like this. All the data required for the putation is present in the cart already, and the calculation is basically a one-liner. Accessing the data from the children will be at least as plicated as simply doing the calculation in the parent on its own. – Linus Borg Commented Jul 26, 2016 at 9:48
• The cart is a trivial example I used to illustrate the nature of my problem. Had the calculation not been a one-liner as would be from time to time, ponents would be a nice way to decouple the logic meant for the cart item. Do you have any suggestions other than directly accessing the child without doing the calculations on the parent? – howellmartinez Commented Jul 26, 2016 at 10:24

1 Answer 1

You have to name the children, for example by means of the v-ref directive. Then from the parent you resolve the children properties with this.$refs.mychild.myproperty