[Vuejs]-I'm attempting to clear my object of errors on an elements key down without success

0👍

I found my mistakes. First, I need to add the name attribute to both of my inputs. Second, I removed my single quotation marks from delete this.errors['field'] which should be this.errors[field]

Updated code:

<template>
  <div>
    <b-form @submit="onSubmit" @reset="onReset" v-if="show" @keydown="errors.clear($event.target.name)">
      <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          placeholder="Enter email"
          name="email"
        ></b-form-input>
        <span class="help is-danger" v-if="errors.has('email')" v-text="errors.get('email')"></span>
      </b-form-group>
      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="form.name"
          placeholder="Enter name"
          name="name"
        ></b-form-input>
        <span class="help is-danger" v-if="errors.has('name')" v-text="errors.get('name')"></span>
      </b-form-group>
      <b-button type="submit" variant="primary" :disabled="errors.any()">Submit</b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
  </div>
</template>

<script>
  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) {
      return this.errors = errors;
    }

    clear(field) {
      console.log('message: ' + field); //<-- executed with a blank message
      delete this.errors[field]; //<-- not sure if this is working as expected
    }
  }

  export default {
    components: {

    },

    data() {
      return {
        form: {
          email: '',
          name: '',
        },
        show: true,
        errors: new Errors(),
      }
    },
    methods: {

      onSubmit(evt) {
        evt.preventDefault()

        var self = this

        axios.post('/employees', {
          name: this.form.name,
          email: this.form.email,
        })
        .then(response => {
          evt.target.reset();

          // Trick to show form after form reset
          self.show = true;
        })
        .catch(error => {
          //self.errors = error.response.data.errors.email[0];
          this.errors.record(error.response.data.errors);
          console.log(error.response.data.errors);
        });
      },
      onReset(evt) {
        evt.preventDefault()
        // Reset our form values
        this.form.email = ''
        this.form.name = ''
        // Trick to reset/clear native browser form validation state
        this.show = true
      },
    },
  }
</script>

Leave a comment