title: Vue JS - How to dynamically create tables
body: <p>I am looking to have a button where, when clicked, a new table is created. Is it possible to do so? I have searched across online for something like this, but I have not been able to find anything. All examples deal with a single table and adding/deleting rows from it.
  The issue I run into is rendering the html table tags from Vue with the methods attached. That is where I have reached a road block. Also, I'm not so sure how I would be able to add rows based on the table. Would what I am trying to accomplish be possible? </p>
  
  <p><strong>Update</strong></p>
  
  <p>I am able to insert multiple components, but only if I hard-code them in the html.</p>
  
  <p><strong>html</strong><br>
      </p>
  
  <pre><code>&lt;div class="temp"&gt;
  
      &lt;temp&gt;&lt;/temp&gt;
      &lt;temp&gt;&lt;/temp&gt;
      &lt;temp&gt;&lt;/temp&gt;
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>With regards to Vue, I created a template component and everything is functioning as it should. My aim is to insert <code>&lt;temp&gt;&lt;/temp&gt;</code> onto the html page when a button is clicked, so that another table can be created.</p>
  
  <p><strong>Vue</strong></p>
  
  <pre><code>Vue.component('temp', {
      template: '\
  &lt;div&gt;\
      &lt;table v-for="(name,i) in rows.slice(0,1)" :key="i"&gt;\ 
          &lt;tr&gt;
              &lt;input class="form-control" type="text" v-model="name.exercise" placeholder="Exercise Name"/&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;Set&lt;/th&gt;
              &lt;th&gt;Reps&lt;/th&gt;
              &lt;th&gt;Rest&lt;/th&gt;
              &lt;th&gt;Comments&lt;/th&gt;
           &lt;/tr&gt;
           &lt;tr v-for= "(row,k) in rows" :key="k"&gt;
               &lt;td scope="row"&gt;
                   &lt;i class="fa fa-trash" v-on:click="delRow(k,row)"&gt;&lt;/i&gt;
               &lt;/td &gt;
               &lt;td&gt;
                   &lt;input class="form-control" type="number"v-model="row.set_num" readonly="readonly"/&gt;
               &lt;/td&gt;
               &lt;td&gt;\
                   &lt;input class="form-control" type="text" v-model="row.num_of_reps" placeholder="10"/&gt;\
               &lt;/td&gt;\
               &lt;td&gt;\
                   &lt;input class="form-control" type="text" v-model="row.rest_time"placeholder="1:30"/&gt;\
               &lt;/td&gt;\
               &lt;td&gt;\
                   &lt;input class="form-control" type="text" v-model="row.comments"/&gt;\
               &lt;/td&gt;\
          &lt;/tr&gt;\
      &lt;/table&gt;\
      &lt;button type="button" class="btn btn-info" v-on:click="addRow"&gt;\
          &lt;i class="fa fa-plus"&gt;&lt;/i&gt;\
              Add Row\
          &lt;/button&gt;\
  &lt;/div&gt;',
      data() {
          return {
              set_number: 2,
              rows: [{
                  exercise:"exercise",
                  set_num: 1,
                  num_of_reps: "",
                  rest_time: "",
                  comments: ""
              }]
          }
      },
      methods: {
          addRow: function () {
              this.rows.push({
                  exercise:"exercise",
                  set_num: this.set_number++,
                  num_of_reps: "",
                  rest_time: "",
                  comments: ""
              });
          },
          delRow: function (k, row) {
              let row_index = this.rows.indexOf(row);
              if (row_index &gt; 0) {
                  this.rows.splice(row_index, 1);
              }
              this.set_number = 1;
              for (let i in this.rows) {
                  this.rows[i].set_num = this.set_number;
                  this.set_number++;
              };
          }
  
      }
  });
  
  let temp = new Vue({
      el: ".temp",
  
  
  });
  </code></pre>