title: v-for set current border color after click
body: <p>I have a vue components who loads a list of users:</p>
  <pre><code>        &lt;div
          v-for=&quot;(user, index) in users&quot;
          class=&quot;user rounded-md border px-5 py-3 mr-5&quot;
          :class=&quot;{ 'border-gray-400':!isp &amp;&amp; !isa &amp;&amp; !isi, 'border-green-400': isp, 'border-red-400': isa, 'border-yellow-400': &amp;&amp; isi }&quot;
      &gt;
          &lt;div class=&quot;flex&quot;&gt;
              &lt;div class=&quot;mt-1 font-medium&quot;&gt;
                  {{ user.fullname }}
              &lt;/div&gt;
              &lt;div class=&quot;flex ml-3&quot;&gt;
                  &lt;div class=&quot;cursor-pointer&quot; @click=&quot;isPresent(student.id)&quot;&gt;
                      Available
                  &lt;/div&gt;
                  &lt;div class=&quot;ml-3 cursor-pointer&quot; @click=&quot;isAbsent(student.id)&quot;&gt;
                      Not available
                  &lt;/div&gt;
                  &lt;div class=&quot;ml-3 cursor-pointer&quot; @click=&quot;addNotes(student.id)&quot;&gt;
                      Add Notes
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>The users are loaded by ajax with the created() function:</p>
  <pre><code>    created() {
              axios
                  .get(&quot;/api/users)
                  .then(resp =&gt; {
                          this.users = resp.data.users;
                      }
                  )
                  .catch(err =&gt; console.log(err.response.data));
  
      },
  </code></pre>
  <p>Now when i click on &quot;<code>Available</code>&quot;, an ajax request is send to the server and the border of the current user should be <code>green</code>, because the current users <code>isp</code> ( is present ) variable should be set to <code>true</code>.</p>
  <p>If the second user - for example - is &quot;<code>Not Available</code>&quot;, this users <code>isa</code> ( is absent ) variable should be set to <code>true</code> and the border will become <code>red</code>.</p>
  <p>The ajax request for setting the attendance looks like this:</p>
  <pre><code>            axios
                      .post('/api/store', data)
                      .then(resp =&gt; {
                              if (resp.status == 200) {
                                   switch (state) {
                                         case 'present':
                                         this.isp = true;
                                         break;
                                   case 'absent':
                                         this.isa = true;
                                         break;
                                   case 'late':
                                         this.isi = true;
                                         break;
                                   case 'ill':
                                         this.isi = true;
                                         break;
  
                              }
                          }
                      )
                      .catch(err =&gt; {
                          console.log(err.response);
  
                      });
  </code></pre>
  <p>When the border of the second user is red, the first one should stay green.</p>
  <p>Actually all the borders are set to green, red or yellow no matter which user i click.
  I have also tried with the index - the right user was marked, but all the other users status were removed.</p>