title: How do you toggle a button with Vue.js?
body: <p><strong>Note:</strong> Using Vue.js and Vuetify.js for functionality and styling.</p>
  <p>With <code>:class</code> and <code>@click</code> properties, I was able to change the button's background color to desired color, but it applies the change to <strong>all of them</strong>, and not just the one that I clicked on.</p>
  <p><strong>Question: How do I have a button toggled without having all of them toggled at once?</strong></p>
  <p>In my vue file:</p>
  <pre><code>&lt;v-layout&gt;
    &lt;v-flex md6&gt;
      &lt;v-text-field&gt;Welcome.&lt;/v-text-field&gt;
    &lt;/v-flex md6&gt;
    &lt;v-flex id=&quot;icon-filter&quot;&gt;
      &lt;span&gt;Filter by:&lt;/span&gt;
      &lt;v-btn class=&quot;filter-button&quot; :class=&quot;{toggled: isToggled}&quot; @click=&quot;isToggled = !isToggled&quot;&gt;&lt;v-icon&gt;local_offer&lt;/v-icon&gt;&lt;/v-btn&gt;
      &lt;v-btn class=&quot;filter-button&quot; :class=&quot;{toggled: isToggled}&quot; @click=&quot;isToggled = !isToggled&quot;&gt;&lt;v-icon&gt;notifications&lt;/v-icon&gt;&lt;/v-btn&gt;
    &lt;/v-flex&gt;
  &lt;/v-layout&gt;
  </code></pre>
  <p>In the <code>script</code> section of same vue file:</p>
  <pre><code>&lt;script&gt;
    export default {
      data: function() {
        return {
          companies,
          msg: &quot;indiv&quot;,
          dashboards: ['profile', 'charts'],
          isToggled: false
        }
      },
      methods: {
        
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>I've read through this question, but I get a Vue warning, mentioning that I have <code>isToggled</code> method as already defined data property. <a href="https://stackoverflow.com/questions/31094217/toggle-class-for-an-item-vue-js">Toggle Class for an item Vue.js</a></p>
  <p>I also read through vue.js docs on data binding, but still need help on this.
  <a href="https://v2.vuejs.org/v2/guide/class-and-style.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/class-and-style.html</a></p>
  <p>Vuetify framework has toggled buttons components, but client wants a distinct style, so cannot use this.
  <a href="https://vuetifyjs.com/components/buttons" rel="nofollow noreferrer">https://vuetifyjs.com/components/buttons</a></p>