我正尝试清除我的错误对象，并按下键失败而没有成功

Question

[我的目标是，当我使用Vuejs和我的Errors javascript类键入HTML元素时，从我的自定义错误对象中删除错误消息（如果有的话。）>

我能够从laravel那里收到错误，如果有错误，它们会显示在html元素下的范围内。但是，当我按下出现错误的元素时，该消息不会消失，并且我不确定为什么。

在我的b表格中，我有：@keydown="errors.clear($event.target.name)我将console.log('message: ' + field);放在清晰的方法中以进一步解决此问题，但是我又回来了'message：'，后面什么也没有。

代码：

<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 exepected
    }
  }

  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>

我的目标是，当我使用Vuejs和我的Errors javascript类键入HTML元素时，从我的自定义错误对象中删除错误消息（如果有的话）。我能够收到错误了...

Answer 1

我发现了我的错误。首先，我需要将name属性添加到两个输入中。其次，我从delete this.errors['field']中删除了单引号，应该是this.errors[field]