title: Vue - how to bind table column to a data object?
body: <p>I'm new to Vue, so go easy on me! Here's the situation. There must be a better way than what I'm doing here.</p>
  
  <p>I have a simple 2 column HTML table:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="contacts"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;th class="column-1"&gt;
              Contact Id
          &lt;/th&gt;
          &lt;th class="column-2"&gt;
              Applications assigned count
          &lt;/th&gt;       
      &lt;/tr&gt;
        &lt;tr class="odd" id="contacts_tr_1"&gt;
   &lt;td class="column-1"&gt;
        1
        &lt;/td&gt;
   &lt;td class="column-2"&gt;
        247
        &lt;/tr&gt;
        &lt;tr class="even last" id="contacts_tr_2"&gt;
   &lt;td class="column-1"&gt;
        2
        &lt;/td&gt;
   &lt;td class="column-2"&gt;
       0
        &lt;/td&gt;
    &lt;/tr&gt;
        &lt;tr class="even last" id="contacts_tr_2"&gt;
   &lt;td class="column-1"&gt;
        3
        &lt;/td&gt;
   &lt;td class="column-2"&gt;
       44
        &lt;/td&gt;
    &lt;/tr&gt;
          &lt;tr class="even last" id="contacts_tr_2"&gt;
   &lt;td class="column-1"&gt;
        .........
        &lt;/td&gt;
   &lt;td class="column-2"&gt;
       .........
        &lt;/td&gt;
    &lt;/tr&gt;
  
        &lt;tr class="even last" id="contacts_tr_2"&gt;
   &lt;td class="column-1"&gt;
        10
        &lt;/td&gt;
   &lt;td class="column-2"&gt;
       76
        &lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
   &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to update the "Applications assigned count" column (but only for certain rows), as determined by the result of an AJAX call. So assuming the table has 10 rows, the AJAX call might say that the value of the "Applications assigned count" column of rows 1, 4 and 7 need to be updated, to e.g. 247, 80 and 356 respectively. I'm thinking of using a JSON object like this as my Vue data object, because the AJAX response will look like this.</p>
  
  <pre><code>  data: {
      num_of_applications_assigned: [
          {
              "party_id": "1",
              "num": "247"},
          {
              "party_id": "4",
              "num": "80"},
          {
              "party_id": "7",
              "num": "356"}
  
      ]
    },
  </code></pre>
  
  <p>I thought there might be a way to bind the "Applications assigned count" column to the Vue data object that gets updated by the AJAX call, but I don't see a way to do this other than adding a unique v-text to each individual <code>&lt;TD&gt;</code> cell e.g. </p>
  
  <pre><code>&lt;div v-text="num_of_applications_assigned_1"&gt;&lt;/div&gt;
  &lt;div v-text="num_of_applications_assigned_2"&gt;&lt;/div&gt;
  etc
  </code></pre>
  
  <p>However, this has lead me to writing some very convoluted code when updating those v-texts with the results of the AJAX response, as I have to dynamically construct the references:</p>
  
  <pre><code> let vm = this;
      jQuery.ajax({
              url: myurl
          }).then(function(response) {                
             for (var i = 0, len = vm.num_of_applications_assigned.length; i &lt; len; i++) {
              var party_id = vm.num_of_applications_assigned[i].party_id;
              var dref = 'vm.num_of_applications_assigned_'+party_id;
              var dnum = vm.num_of_applications_assigned[i].num;
              eval(dref + ' = ' + dnum + ';');
             }           
      });
  </code></pre>
  
  <p>Yes, I know <strong>eval is bad</strong> - that's why I'm here asking for help! What is a better way of doing this, or is Vue not a good match for this situation?</p>