title: How to show grouped items using v-for in Vue?
body: <p>I have an array like this:</p>
  <pre class="lang-js prettyprint-override"><code>// ...
  data():{
      return{
          list: [
              { letter: &quot;A&quot;, name: &quot;Albert&quot; },
              { letter: &quot;A&quot;, name: &quot;Archer&quot; },
              { letter: &quot;B&quot;, name: &quot;Blade&quot; },
              { letter: &quot;B&quot;, name: &quot;Birdie&quot; },
          ]
      }
  }
  </code></pre>
  <p>and I want to display it grouped:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;section&gt;
          &lt;div&gt;A:&lt;/div&gt;
          &lt;div&gt;Albert&lt;/div&gt;
          &lt;div&gt;Archer&lt;/div&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;div&gt;B:&lt;/div&gt;
          &lt;div&gt;Blade&lt;/div&gt;
          &lt;div&gt;Birdie&lt;/div&gt;
      &lt;/section&gt;
  &lt;/template&gt;
  </code></pre>
  <p>As you can see, I want to append <code>&lt;section&gt; &lt;div&gt;{{letter}}:&lt;/div&gt;</code> on the first iteration or if letter is not the same that before, and <code>&lt;/section&gt;</code> if it is the last.</p>
  <p>One option is to create a computed grouped, but this data is got by an API, and the next letters is getting on scroll. So is it posible to have that result with a v-for?</p>