TransWikia.com

Ошибка TypeError: Cannot read property 'hasOwnProperty' of undefined VUE

Stack Overflow на русском Asked on November 20, 2021

При попытке отправки формы выскакивает ошибка:

    at Errors.has (vue-app.js:7)
    at Proxy.eval (eval at makeFunction (vue.js:8238), <anonymous>:3:671)
    at Vue$3.Vue._render (vue.js:2954)
    at Vue$3.<anonymous> (vue.js:2191)
    at Watcher.get (vue.js:1656)
    at Watcher.run (vue.js:1725)
    at flushSchedulerQueue (vue.js:1543)
    at Array.<anonymous> (vue.js:475)
    at nextTickHandler (vue.js:424)
logError @ vue.js:437
Promise.catch (async)
timerFunc @ vue.js:439
queueNextTick @ vue.js:480
queueWatcher @ vue.js:1593
update @ vue.js:1715
notify @ vue.js:582
reactiveSetter @ vue.js:809
record @ vue-app.js:22
onFail @ vue-app.js:71
Promise.catch (async)
submit @ vue-app.js:61
onSubmit @ vue-app.js:88
boundFn @ vue.js:130
submit @ VM267:3
(anonymous) @ vue.js:2750

Не знаю, в чём конкретно заключается проблема и почему в hasOwnProperty передаётся undefined.

mainpage.blade.php:

<div id="app">
<form method="post" name="boocking" action="/clients" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
<div class = 'name'>
  <label for = 'name'>Представьтесь:</label>
  <input type = 'text' id = "client" name="client" v-model = "form.client">
  <span class ="help is-danger" v-if="form.errors.has('client')" v-text="form.errors.get('client')"></span>
</div>
<div class = 'phone'>
  <label for = 'phone'>Номер телефона:</label>
  <input type = 'text' id = "phone" name="phone" v-model = "form.phone">
  <span class ="help is-danger" v-if="form.errors.has('phone')" v-text="form.errors.get('phone')"></span>
</div>
<div class = 'email'>
  <label for = 'email'>Email:</label>
  <input type = 'text' id = "email" name="email" v-model = "form.email">
<span class ="help is-danger" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span>
</div>
<div class = 'submitting'>
  <input type = 'submit' name = 'submitting-botton' value = 'Отправить заказ' :disabled = "form.errors.any()">
</div>
</form>

vue-app.js:

class Errors {
  constructor() {
    this.errors = {};
  }

  has(field) {
    return  this.errors.hasOwnProperty(field);
  }

  any() {
    return Object.keys(this.errors).length > 0;
  }

  get(field) {
    if(this.errors[field]) {
      return this.errors[field][0];
    }
  }


  record(errors) {
    this.errors = errors;
  }

  clear(field) {
    if (field) {
      delete this.errors[field];
      return;
    }
    this.errors = {};
  }
}

class Form {
  constructor(data) {
    this.originalData = data;

    for (let field in data) {
      this[field] = data[field];
    }

    this.errors = new Errors();
  }

  data() {
    let data = Object.assign({}, this);
    delete data.originalData;
    delete data.errors;
    return data;
  }

  reset() {
    for(let field in this.originalData) {
      this[field] = '';
    }
  }

  submit(requestType, url) {
    axios[requestType](url, this.data())
    .then(this.onSuccess.bind(this))
    .catch(this.onFail.bind(this))
  }

  onSuccess(response) {
    alert(response.data.message);
    this.errors.clear();
    this.reset();
  }

  onFail(error) {
    this.errors.record(error.response.data.errors);
  }
}

new Vue({
  el: '#app',
  data: {
    form: new Form({
      client: '',
      phone: '',
      email: ''
    })
  },


  methods: {
    onSubmit() {
      this.form.submit('post', '/clients');

    }
  }
});

Заранее спасибо за помощь.

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP