title: Can I make an attribute appear only once in a vue v-for
body: <p>I have an array of people with associated teams. I want to display all the people in the record, but I only want to display their team name once. </p>
  
  <p>Meaning, if the v-for loop has encountered this particular team name, it should put it in a new temporary array to signify that it should be unique, then when it encounters that team name again, checks it through that temporary array and prevent it from showing again.</p>
  
  <p>Sample HTML Code:</p>
  
  <pre><code>&lt;div id="a-list"&gt;
       &lt;div v-for="person in people"&gt;{{person.Name}}, {{person.Team}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Sample Vue Code:</p>
  
  <pre><code>var crew = new Vue({
  el: "#a-list",
  data: {
  people:
    [ { "Name": "Richard","Team":"DMS"}, { "Name": "Mark","Team":"VV"}, { "Name": "Steve","Team":"VV"}, {"Name":"Koji","Team":"MZ"}, {"Name":"Jamie","Team":"VV"} ]
    }
  });
  </code></pre>
  
  <p>Expected Output:</p>
  
  <pre><code>Richard, DMS
  Mark, VV
  Steve, 
  Koji, MZ
  Jaimie,
  </code></pre>
  
  <p>Is this possible to do directly from the v-for loop and not in the JS file?</p>
  
  <p>Edited to show more data that are not sequential</p>
  
  <p>Update: As Fabio has pointed out, the above scenario wouldn't make much sense unless the order of the team is arranged sequentially in the output first. So his answer is correct.</p>