title: How to change button color if button active or selected using Vue js
body: <p>I want to change button color if the button is active or selected.</p>
  <p>This is my code:</p>
  <p><strong>template</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;div&gt;
        &lt;button
          class=&quot;btn btn-primary mb-3&quot;
          @click=&quot;btnBlue()&quot;
        &gt;
          Blue
        &lt;/button&gt;
        &lt;button
          class=&quot;btn btn-warning text-white mx-3 mb-3&quot;
          @click=&quot;btnYellow()&quot;
        &gt;
         Yellow
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;span
          class=&quot;btn-map&quot;
          v-for=&quot;(item, index) in new Array(data.length)&quot;
          :key=&quot;index&quot;
        &gt;
          &lt;button
            class=&quot;btn btn-outline-primary&quot;
            :class=&quot;{ active: index + 1 === activeButton }&quot;
            :style=&quot;{ 'background-color': color}&quot;
            @click=&quot;setActive(index)&quot;
          &gt;
            {{ index + 1 }}
          &lt;/button&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>Script</strong></p>
  <pre><code>&lt;script&gt;
  export default {
    name: 'App',
    data() {
      return {
        data: [ 1, 2, 3, 4, 5],
        color: &quot;&quot;,
        activeButton: 0
      }
    },
    methods: {
      setActive(index) {
        this.activeButton = index + 1;
      },
      btnBlue() {
        this.color = '#039BE5';
      },
      btnYellow() {
        this.color = '#f3b808';
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>This is the : <a href="https://stackblitz.com/edit/vue-1lbdsr?file=src%2FApp.vue" rel="nofollow noreferrer">demo link</a></p>
  <p>I want to change the button color if I click the <code>blue</code> button, I want only the selected active button color is changing to <code>blue</code> not all button. If I click the <code>yellow</code> button I want only the selected active button color is changing to <code>yellow</code> not all button dan if no button selected then button <code>blue</code> or <code>yellow</code> clicked, I want no color changed. So the color only change on selected or active button and color not changing if no button selected or active.</p>
  <p>Please help me to change the color button only on selected active button.
  Thanks.</p>