title: Vue.js - Change element's class based on change to data property
body: <p>I have a Vue instance which has two data properties: <code>error</code> which is initially set to <code>false</code>, and <code>classArray</code> which is an object that contains two classes: <code>btn</code> and <code>btn-success</code>.</p>
  
  <hr>
  
  <p><code>btn</code> is set to <code>true</code> and
  <code>btn-success</code> is set to <code>error</code>, which initially is <code>false</code>.</p>
  
  <p>I have two <code>input</code> elements, both of which are buttons, where the first one's class is set to <code>classArray</code>.</p>
  
  <p>The other button, upon clicking, invokes a method attached to my Vue instance that is supposed to toggle <code>error</code> (so if <code>error</code> is <code>true</code>, then it becomes <code>false</code>, and vice versa).</p>
  
  <p>My expectation is that, because <code>btn-success</code> in <code>classArray</code> is set to the value of <code>error</code>, that upon toggling the value of <code>error</code> the corresponding class should be active on my first element.</p>
  
  <p>Even though the toggling of <code>error</code> works as expected, when inspecting the first element, it doesn't appear that the <code>btn-success</code> class was added.</p>
  
  <p>Is there something here I'm missing, or can you not add classes to elements like this?</p>
  
  <p>Also, here is the code I'm using to test this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = new Vue({
    el: '#app',
    data: {
      error: false,
      classArray: {
        btn: true,
        'btn-success': this.error
      }
    },
    methods: {
      toggle: function() {
        this.error = !this.error;
        console.log(document.getElementById('input1'));
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;input type='button' id='input1' :class='classArray' value='Submit' /&gt;
    &lt;input type='button' @click='toggle' value='Change class' /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>