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

Question

My goal is to remove the error message from my custom errors object(if it's there) when I key down on the HTML element using Vuejs and my Errors javascript class.

I am able to receive the errors back from laravel which are shown in a span under the html element if there are errors. However, when I keydown on the element that has an error the message doesn't disappear and I'm not sure why.

In my b-form I have: @keydown="errors.clear($event.target.name) I placed console.log('message: ' + field); in my clear method to further troubleshoot this issue, but I am getting back 'message:' with nothing after it.

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"
        ></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"
        ></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>

Answer 1

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>