title: Vue Dynamic V-For Show and Hide div
body: <p>I would like to show one div and hide another one when i click on it.
  What happens though is: I have a list of Users, each user has an icon next to its name. Clicking on one icon changes it for every user (because on click on an icon it should hide it and show another icon).
  So how can i manage to differentiate them?
  Info: My console log works it shows different users, but how do I manage to differentiate the v-show directive?</p>
  
  <pre><code>    &lt;template&gt;
    &lt;span&gt;
      &lt;span class="userListContent" v-for="user in this.userResults" :key="user.id"&gt;
        &lt;a :href="'/profile/'+user.id" target="blank"&gt;{{user.name}}&lt;/a&gt;
        &lt;i v-show="visibleBefore" @click="visibleAfter = true" class="far fa-plus"&gt;&lt;/i&gt;
        &lt;i v-show="visibleAfter" class="far fa-check-circle"&gt;&lt;/i&gt;
        &lt;input type="checkbox" /&gt;
      &lt;/span&gt;
    &lt;/span&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ["userResults"],
    data: function() {
      return {
          visibleBefore: true,
          visibleAfter: false
      };
    },
    methods: {
      change(user) {
        console.log(user);
        //   this.visibleBefore = false;
        //   this.visibleAfter = true;
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>I also tried to have a user object in data function but this seems to be completely wrong.
  Thanks in advance</p>