title: Fire a function onreadystatechange with vue
body: <p>Hi so I'm using <strong>formspree</strong> along with <em>ajax</em> to submit a form through the client side of my webpage but I have an error when firing a function inside the <strong>onreadystatechange</strong> function of the xmlhttprequest i'm sending to submit data to formspree. PS: I used an <strong>invalid</strong> formspree address so it only fires the error function</p>
  
  <p>here is my snippet:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
  el: '#app',
  data: {
    msg: "",
    name: null,
    pass: null
  },
  methods: {
   error(error){
              this.msg = "error:"+error
            },
   success(){
              this.msg = "success"
            },
  
          send(){
                  let form = $('#contact-form')[0]
                  var data = new FormData(form);
                  this.ajax(form.method, form.action, data, this.success(), this.error());
                  
                  if(this.ajax){
                      this.name = this.pass = null
                  }
                  else
                  {
                    //other
                  }
          },
  
          ajax(method, url, data, success, error) {
              var xhr = new XMLHttpRequest();
              xhr.open(method, url);
              xhr.setRequestHeader("Accept", "application/json");
              xhr.onreadystatechange = function() {
                if (xhr.readyState !== XMLHttpRequest.DONE) return;
                if (xhr.status === 200) {
                  success(xhr.response, xhr.responseType);//is not a fucntion
                } else {
                  error(xhr.status, xhr.response, xhr.responseType);//is not a fucntion here
                }
              };
              xhr.send(data);
            },
  }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input{display: block;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
   &lt;form id="contact-form" method="POST"   action="https://formspree.io/mfaeqny" @submit.prevent="send"&gt;
    &lt;input type="text" v-model="name" name="name" placeholder="name"&gt;
    &lt;input type="password" v-model="pass" name="pass" placeholder="pass"&gt;
    &lt;button type="submit"&gt;submit&lt;/button&gt;
    &lt;p&gt;{{ msg }}&lt;/p&gt;
   &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>