title: Upon clicking one absent button, all other absent buttons get selected. I just want to select only one absent button at a time
body: <p>This is before selecting an absent button<br>
  <a href="https://i.stack.imgur.com/8pDj9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8pDj9.png" alt="This is before selecting an absent button"></a></p>
  
  <p>This is after selecting an absent button<br>
  <a href="https://i.stack.imgur.com/JAgHd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JAgHd.png" alt="This is after selecting an absent button"></a></p>
  
  <p>This is my code in vuejs:</p>
  
  <pre><code>&lt;b-button pill variant="outline-secondary" :class="{ absent: showAbsent }"  @click="markAttendance"   &gt;A&lt;/b-button&gt;    
  
  methods: {
      markAttendance() {
        this.showAbsent = true;
      }
    }
  
      .absent { background-color: red; }
  </code></pre>