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

Question

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>

Try out to use an arrow function to get access to this like this.general.learnings.filter( (el)=> { — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 24, 2021 at 19:41

Rahul · Accepted Answer · 2021-08-24 19:42:18Z

3

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");
        }
      });

answered Aug 24, 2021 at 19:42

Rahul

5,9147 gold badges44 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related