title: How to bind to array objects in vue?
body: <p>I have a data array that I want to bind input element entry (integers) into data fields, and then total them.  This is akin to a spreadsheet where it can compute the sum or difference of different values specified in the same column.</p>
  
  <p>I don't understand from vue.js documentation, what it takes to make two-way data binding work on these array objects.  I can't tell if the values are updating in the array.  Either they aren't updating the array, or the summation link is not being updated.  Do you have a recommendation for determining if the data binding is broken, or why the expression is not getting updated?</p>
  
  <pre><code>&lt;tr v-for="(row, powerIndex) in powers"&gt;
      &lt;td :class="powerlabelclass(row)"&gt;{{ row.name }}&lt;/td&gt;
      &lt;td class="power-item" v-for="turn in turns"&gt;
          &lt;div v-if="row.expression"&gt;
              &lt;input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" :value="calculatepower(powerIndex, turn)" /&gt;       
          &lt;/div&gt;
          &lt;div v-else&gt;
              &lt;input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" :value="row.turns[turn]" /&gt;        
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Here is the js fiddle: <a href="https://jsfiddle.net/ledlogic/fst561by/" rel="nofollow noreferrer">https://jsfiddle.net/ledlogic/fst561by/</a></p>