[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'Array' of undefined"

user_13045795 0
Viewed 430

I want to check the inputs for emptiness when clicking on the button I filter the array if one of the inputs is empty I try to add an error to the array, but when I click on the button I get the error "'ErrorList' of undefined" I think that the error is that I trying to get an array called ErrorList inside a method called save, but how do I get rid of this problem then? You can also look at my code in codesandbox

<template>
  <div>
    <form>
      <div v-for="(learning, i) in general.learnings" :key="i">
        <input type="text" v-model="general.learnings[i]" maxlength="120" />
      </div>

      <button @click="save">Save</button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    save(e) {
      e.preventDefault();

      this.general.learnings.filter(function (el) {
        if (el !== "") {
          return true;
        } else {
          this.errorList.push("Error");
        }
      });
    },
  },
  data() {
    return {
      errorList: [],
      general: {
        learnings: ["", ""],
      },
    };
  },
};
</script>
vuejs2 vue.js arrays javascript
1 Answers

this is happening because reference of this is not referencing to your component inside the filter.

Simply change to arrow function to fix the issue.

 this.general.learnings.filter( (el) => {
        if (el !== "") {
          return true;
        } else {
          this.errorList.push("Error");
        }
      });
user_44522220
Related