title: Vue JS add bulma class is-loading when button has been clicked
body: <p>I am trying out bulma. What I want is to <a href="https://bulma.io/documentation/elements/button/" rel="nofollow noreferrer">show the loading icon over a button</a> when it is clicked.</p>
  <p>Here it's the head part:</p>
  <pre><code>&lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Button loading in Bulma&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css&quot;&gt;
  &lt;/head&gt;
  </code></pre>
  <p>This is the body code:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
          &lt;!--Vue container--&gt;
      &lt;div id=&quot;app&quot;&gt;
          &lt;div class=&quot;tile notification is-info&quot;&gt;
              &lt;div class=&quot;column&quot;&gt;
                  &lt;h1&gt;Newsletter&lt;/h1&gt;
                  &lt;form&gt;
                      &lt;!-- Email --&gt;
                      &lt;div class=&quot;field&quot;&gt;
                          &lt;label class=&quot;label&quot; for=&quot;email&quot;&gt;Email&lt;/label&gt;
                          &lt;div class=&quot;control&quot;&gt;
                              &lt;input class=&quot;input is-small&quot; type=&quot;email&quot; id=&quot;email&quot; placeholder=&quot;you@somewhere.com&quot; autofocus&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- Submit button --&gt;
                      &lt;div class=&quot;field&quot;&gt;
                          &lt;div class=&quot;control&quot;&gt;
                              &lt;button class=&quot;button is-primary&quot; @click=&quot;loadingClass = 'is-loading'&quot; :class=&quot;{ loadingClass }&quot;&gt;Submit&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the vue.js script</p>
  <pre><code>&lt;script src=&quot;https://unpkg.com/vue&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
      var app = new Vue({
          el: '#app',
          data: {
              loadingClass: ''
          }
      })
  &lt;/script&gt;
  </code></pre>
  <p>I can't get it to work. What am I missing?</p>
  <p><strong>Solution:</strong></p>
  <p>Well, I have found a workaround <a href="https://v2.vuejs.org/v2/guide/class-and-style.html" rel="nofollow noreferrer">here in the docs</a>, so I have fixed it as follows:</p>
  <p>Form:</p>
  <pre><code>&lt;!-- Submit button --&gt;
                          &lt;div class=&quot;field&quot;&gt;
                              &lt;div class=&quot;control&quot;&gt;
                                  &lt;button class=&quot;button is-primary&quot; v-bind:class=&quot;{ 'is-loading' : loading }&quot;&gt;Submit&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  <p>Script:</p>
  <pre><code>&lt;script&gt;
      var app = new Vue({
          el: '#app',
          data: {
              loading: false
          }
      })
  &lt;/script&gt;
  </code></pre>
  <p>As I change in the console <code>app.loading=true;</code> the button does change to &quot;loading&quot; and viceversa with <code>app.loading=false;</code>
  That's it.</p>