title: VueJS add <tr> after every 25 <tr>'s - IE DOM not recognizing <template>
body: <p>This is a rather abstruse question, I'm hopeful but surprised if there is anyone with an answer to it.</p>
  
  <p>I need to repeat a header row every 25 records.  <strong>The problem is IE</strong>.  If I put the <code>v-for</code> loop inside a <code>&lt;template&gt;</code> tag between tbody and tr, IE 11 "hoists" it out of the DOM to before the <code>&lt;table&gt;</code>, so references to <code>i</code> and <code>datarow</code> in the <code>&lt;tr&gt;</code> tags cause an error.</p>
  
  <p>If however I move the <code>v-for</code> up to the <code>&lt;tbody&gt;</code>, the loop works and IE doesn't mind, but the CSS is objectionable and I can't override it on my end, and all those <code>&lt;tbody&gt;</code>s are semantically wrong.</p>
  
  <p>So I'm left wondering, any way to "dynamically" add a <code>&lt;tr&gt;</code> below a looped tr using VueJS, when i = 25, 50, 75, etc.? </p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
      &lt;!-- &lt;template v-for="(datarow, i) in dataset"&gt; does not work IE11 --&gt;
      &lt;tr v-for="(datarow, i) in dataset"&gt;
          &lt;td&gt;{{ datarow.firstname }}&lt;/td&gt;
          &lt;td&gt;{{ datarow.lastname }}&lt;/td&gt;
          &lt;td&gt;{{ datarow.email }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;!-- I need the following every say 25 rows:
          &lt;tr v-if="!(i % 25)"&gt; //note it must be inside the same loop where `i` is declared though..
          &lt;td&gt;First&lt;/td&gt; &lt;td&gt;Last&lt;/td&gt; &lt;td&gt;Email&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/template&gt;
          --&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>