title: StimulusJS how to compute value in parent controller from values in different child controllers (cart -> cart items)
body: <p>I am building a cart with stimulus. The cart recap page displays multiple cart items. A cart item has a unit price and a quantity.
  Each cart item component has a quantity selector, when the quantity number changes the total price of the cartitem element is recalculated <code>totalCartItem = unitPrice x Quantity</code> and the total price if the cart must also be recalculated <code>totalCartPrice = sum(totalCartItem)</code></p>
  <p>Here's a simplification of the html structure</p>
  <pre><code>&lt;div class=&quot;cart&quot; data-controller='cart'&gt;
    &lt;div class=&quot;cart-item&quot; data-controller='cart-item'&gt;
      &lt;p class='unit-price'&gt;20&lt;/p&gt;
      &lt;input type=&quot;number&quot; name=&quot;quantity&quot; value=&quot;1&quot;&gt;
      &lt;p class='total-price' data-target='cart-item.totalPrice' data-action=&quot;change-&gt;cart-item#update&quot; data-target='cart-item.quantity'&gt;20&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;cart-item&quot; data-controller='cart-item'&gt;
      &lt;p class='unit-price'&gt;10&lt;/p&gt;
      &lt;input type=&quot;number&quot; name=&quot;quantity&quot; value=&quot;2&quot; data-action=&quot;change-&gt;cart-item#update&quot; data-target='cart-item.quantity'&gt;
      &lt;p class='total-price' data-target='cart-item.totalPrice'&gt;20&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;cart-total&quot;&gt;
      40
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My cart item controller works perfectly fine and updates correctly the totalPriceFor a cart item in the UI.</p>
  <pre><code>export default class extends Controller {
    static targets = [&quot;totalPrice&quot;, &quot;quantity&quot;]
  
    static values = {
      unitPrice: String,
    }
  
    connect() {
      console.log(&quot;hello from StimulusJS&quot;)
    }
  
    update(){
      this.totalPriceTarget.textContent = parseFloat(this.unitPriceValue) * parseInt(this.quantityTarget.value)
    }
  }
  </code></pre>
  <p>However, I am now lost on how to update the <code>totalCartPrice</code>. I feel like this should be the responsability of the <code>cartController</code> that wrapps the cartItems elements, but I have no idea on what id the correct way to achieve this.
  I feel like I should add <code>change-&gt;cart#update</code> on each number input selector for quantity for each cart-item, but then what should I add to the cart#update method to recalculate the total from each individual cart item ?</p>
  <pre><code>export default class extends Controller {
    static targets = [&quot;total&quot;]
    connect() {
      console.log(&quot;hello from StimulusJS&quot;)
    }
  
    update(){
      // let details = event.detail;
      // this.cartItemChildren.forEach((item) =&gt; console.log(item.totalValue))
    }
  }
  </code></pre>