0

Не работает axios пишет ошибку Cannot read property 'post' of undefined вот пример кода

var SignupForm = Vue.component('signup-form', {
  
  // TEMPLATE
  template: '#signup-form',
  
  // DATA
  data() {
    return {
      email: '',
      email_msg: '',
      password1: '',
      pwd1_msg: '',
      password2: '',
      pwd2_msg: '',
      disable_btn: true,
      msg1: true,
      msg2: true
    }
  },
  
  // WATCH
  watch: {
    email: function(value) {
      this.valid_email(value, 'email_msg');
    },
    password1: function(value) {
      if(this.check_password_length(value, 'pwd1_msg', 6)) {
        this.check_passwords_match();
      }
    },
    password2: function(value) {
      if(this.check_password_length(value, 'pwd2_msg', 6)) {
        this.check_passwords_match();
      }
    }
  },
  
  // METHODS
  methods: {
    
    valid_email(email, msg) {
      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
        this[msg] = '';
        return true;
      } else {
        this[msg] = 'Keep typing...waiting for a valid email';
        return false;
      } 
    },
    
    check_password_length(value, msg, total) {
      var length = value.length;
      var sum = 0;
      var display;
      
      sum = (total - length);
      
      switch(sum) {
        case 0:
          display = '';
          break;
        case 1:
          display = 'Keep going - just need '+ sum + ' more character.';
          break;
        default:
          display = 'Keep going - just need '+ sum + ' more characters';
      }
      
      if(length >= total) {
        this[msg] = '';
        return true;
      } else {
        this[msg] = display;
        return false;
      }
      
    },
    
    check_passwords_match() {
      if(this.password1.length > 5 && this.password2.length > 5) {
          if(this.password2 != this.password1) {
            this.pwd2_msg = 'Passwords do not match';
            this.disable_btn = true;
            return true;
          } else {
            this.pwd2_msg = '';
            this.disable_btn = false;
            return false;
          }
        }
    },
    
    on_signup() {

      this.axios.post(('test.php', this.email).then());

      this.email = '';
      this.password1 = '';
      this.password2 = '';
      this.email_msg = '';
      this.pwd1_msg = '';
      this.pwd2_msg = '';
      this.msg1 = false;
      this.msg2 = false;
      this.disable_btn = true;
      this.$emit('change_comp', 'results');
    }, 
    
    show_terms() {
      this.$emit('change_comp', 'terms');
    }
  }
  
});

var Results = Vue.component('results', {
  
  // TEMPLATE
  template: '#results',
  
  // METHODS
  methods: {
    back_to_signup() {
      this.$emit('change_comp', 'signup-form');
    }
  }
  
});

var Terms = Vue.component('terms', {
  
  // TEMPLATE
  template: '#terms',
  
  // METHODS
  methods: {
    back_to_signup() {
      this.$emit('change_comp', 'signup-form');
    }
  }
  
});


new Vue({
  
  // ELEMENT
  el: '#app',
  
  // DATA 
  data: {
    compname: 'signup-form'
  },
  
  // COMPONENTS
  components: {
    'signup-form': SignupForm,
    'results': Results,
    'terms': Terms
  },
  
  methods: {
    swapcomp: function(comp) {
      this.compname = comp;
    }
  }
  
});
@import url("https://fonts.googleapis.com/css?family=Roboto");
* {
  box-sizing: border-box;
}

body {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(to left, #79CB0A, #B5D020);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  margin: 30px 0;
  text-align: center;
}
header h2 {
  text-transform: uppercase;
  margin: 0;
}
header p {
  font-size: 1em;
}
header a {
  text-decoration: none;
  border-bottom: 2px dotted #FF8700;
  color: inherit;
}

.signup {
  width: 700px;
  height: 460px;
  position: relative;
  overflow: hidden;
  box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-radius: 5px;
}

.signup:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  z-index: -1;
  background: url(https://source.unsplash.com/Qmox1MkYDnY/900x500) no-repeat;
}

form {
  width: 50%;
  height: 80%;
  padding: 20px 50px 20px 20px;
}

form .form-group {
  display: flex;
  flex-direction: column;
  margin: 0 0 20px 0;
  color: #8F949B;
  font-size: .9em;
}
form .form-group label {
  margin: 0 0 16px 0;
}
form .form-group span {
  font-size: .8em;
  color: #FF3400;
}
form .form-group span#characters {
  font-size: .8em;
  color: #8F949B;
}

.form-group input[type="text"],
.form-group input[type="password"] {
  border: none;
  outline: none;
  background: transparent;
  padding: 0 0 10px 0;
  font-size: 1em;
  border-bottom: 1px dotted #8F949B;
}

.form-group input[type="password"] {
  color: #FF3400;
}

form .form-group:last-child {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0 0 0;
}
form .form-group:last-child button {
  border: none;
  background: linear-gradient(to left, #FF8700, #FFB100);
  padding: 10px 30px;
  border-radius: 20px;
  color: #FFFFFF;
  font-size: .8em;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
}
form .form-group:last-child button.active {
  opacity: .5;
  cursor: default;
}
form .form-group:last-child a {
  color: #8F949B;
  text-decoration: dotted;
  font-size: .8em;
}

.results, .terms {
  width: 50%;
  height: 80%;
  padding: 20px 50px 20px 20px;
}

.fade-enter-active, .fade-leave-active {
  transition: all .8s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
  transform: translateX(-40px);
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="container">

  <header>
    <h2>Sign Up Form (Coded)</h2>
    <p>Based on <a href="https://drc8llcc7rqy7.cloudfront.net/shots/2409898/24-sign-up-large" target="blank">Sign Up Design #39</a> by <a href="https://dribbble.com/deab" target="blank">Denis Abdullin</a>.</p>
  </header>
  
  <div id="app" class="signup">
    <transition name="fade" mode="out-in">
      <component :is="compname" @change_comp="swapcomp($event)"></component>
    </transition>
  </div>
  
  <template id="signup-form">
      <form>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" v-model="email" />
          <span v-if="email.length > 1">{{ email_msg }}</span>
        </div>
        <div class="form-group">
          <label for="psw1">Password <span id="characters">(6 or more characters required)</span></label>
          <input type="password" v-model="password1" />
          <span v-show="msg1">{{ pwd1_msg }}</span>
        </div>
        <div class="form-group">
          <label for="psw2">Repeat Password</label>
          <input type="password" v-model="password2" />
          <span v-show="msg2">{{ pwd2_msg }}</span>
        </div>
        <div class="form-group">
          <button :class="{active: disable_btn}":disabled="disable_btn" @click.prevent="on_signup()">Sign Up</button>
          <a href="#0" @click="show_terms()">terms & conditions</a>
        </div>
      </form>
    </template>
  
    <template id="results">
      <div class="results">
        <h4>FORM SUBMIT SUCCESSFUL</h4>
        <p>Form data gets saved and/or sent to server. There could also be a confirmation sent to email address</p>
        <p>Button would take you to some sort of after signup page.<br>In this case it just shows the form again</p>
        <button @click="back_to_signup()">Continue</button>
      </div>
    </template>
  
    <template id="terms">
      <div class="terms">
        <h4>TERMS & CONDITIONS</h4>
        <p>A list of terms, conditions, and policies.</p>
        <button @click="back_to_signup()">Back</button>
      </div>
    </template>
  
</div>

или тут http://mydoremi.ml/backEnd/view/lk/LogIn/

3
  • this.axios действительно у тебя нигде не определяется Думаю следует this тут убрать)) 8 ноя 2018 в 5:34
  • @EvgeniyBelov делал все так же
    – Vadim
    8 ноя 2018 в 8:59
  • Ну так а кто его подключать будет к странице? И да, this лишнее. 8 ноя 2018 в 10:27

1 ответ 1

1

Axios - это отдельная библиотека, которую тоже требуется подключить к проекту, похоже на то, что ты просто этого не сделал

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.