用vue在状态变送器上启动函数

Question

嗨，所以我使用 formspree 和ajax通过网页的客户端提交表单，但是当我在xmlhttprequest的xmlhttprequest函数内触发函数时出错了，我要发送数据给formspree。PS:我使用了一个无效的表单地址，所以它只触发错误函数。

这是我的片段：

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);
          },
}
})

input{display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <form id="contact-form" method="POST"   action="https://formspree.io/mfaeqny" @submit.prevent="send">
  <input type="text" v-model="name" name="name" placeholder="name">
  <input type="password" v-model="pass" name="pass" placeholder="pass">
  <button type="submit">submit</button>
  <p>{{ msg }}</p>
 </form>
</div>

​

Answer 1

解决方案:删除函数this.ajax(form.method, form.action, data, this.success, this.error);后的括号

​

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);
          },
}
})

input{display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <form id="contact-form" method="POST"   action="https://formspree.io/mfaeqny" @submit.prevent="send">
  <input type="text" v-model="name" name="name" placeholder="name">
  <input type="password" v-model="pass" name="pass" placeholder="pass">
  <button type="submit">submit</button>
  <p>{{ msg }}</p>
 </form>
</div>

​