提交后数据变量在Vue中未定义

Question

我在数据中将 isError 定义为 false，但是一旦 laravel 出现错误，我就会得到 422 错误。然后我想将 isError 定义为 true，但是当我这样做时，我从控制台收到一个错误，说 iserror 是未定义的，即使它已被定义。问题是什么？ 错误如下： app.js:1925 Uncaught (in promise) ReferenceError: isError is not defined

谢谢

<template>
<div class="contact-section">
   <div class="container">
      <div class="section-content row">
         <div class="contact-text col-lg-6">
            <div class="text-box">
               <h1 class="subtitle text-white">Contact</h1>
               <h2 class="text-white"> Have You Any Project? <br> Please Drop a Message </h2>
               <p class="text-white"> Get in touch and let me know how i can help. Fill out the form and i’ll be in touch as soon as possible. </p>
            </div>
            <ul class="contact-info">
               <li>
                  <img src="assets/images/icons/email.png" alt="Email">
                  <div>
                     <strong>Email:</strong>
                     <ul>
                        <li><a href="mailto:info@nafie.com">info@nafie.com</a></li>
                     </ul>
                  </div>
               </li>
            </ul>
         </div>
         <div class="col-lg-6">
            <form class="contact-form form-styled" @submit.prevent="send">
               <div class="group">
                  <label>Name</label>
                  <div class="control has-prefix-icon">
                     <input type="text" name="name" placeholder="e.g. John Doe" minlength="3" v-model="form.name">
                  </div>
               </div>
               <div class="group">
                  <label>Email</label>
                  <div class="control has-prefix-icon">
                     <input class="ltr-dir" type="email" name="email" placeholder="e.g. john.doe@gmail.com" v-model="form.email">
                  </div>
               </div>
               <div class="group">
                  <label>Message</label>
                  <div class="control has-prefix-icon">
                     <textarea name="message" placeholder="Write message..." v-model="form.message"></textarea>
                  </div>
               </div>
               <div class="group">
                <p v-if="isError" class="error large">All fields are required</p>
                  <div class="control"><button class="submit-btn btn btn-dark" type="submit">Send</button></div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
</template>

<script>
    export default {
        data: function() {
            return {
                form: {
                    email: '',
                    message: '',
                    name: ''
                },
                errors: {},
                isError: false
            }
        },
        methods: {
            send: function() {
                // Reset is error
                this.isError = false;
                axios.post("/send", this.form)
                .then(function (response) {
                    // Reset form on success
                    this.form.name = '';
                    this.form.email = '';
                    this.form.message = '';
                    console.log(response);
                })
                .catch(function (error) {
                    // Says here undefined?
                    this.isError = true;
                    console.log(error);
                    console.log(error.response.data.errors);
                });
            }
        }
    }
</script>

Answer 1

send: function()
{
  // Reset is error
  this.isError = false;
  let self = this;
  axios.post("/send", this.form).then(function(response)
  {
    // Reset form on success
    self.form.name = '';
    self.form.email = '';
    self.form.message = '';
    console.log(response);
  }).catch(function(error)
  {
    // Says here undefined?
    self.isError = true;
    console.log(error);
    console.log(error.response.data.errors);
  });
}