How can you access Data on Vue if using arrow function

Question

We are using Vue and arrow function on methods. Since arrow function has no this keyword, how can we access the data like list or object

export default {
  data() {
    return {
      list: [],
      object: {},
    }
  },
  methods: {
    onSubmit: (e) => {
      //How can access this here?
      //Im trying to access this.list
      console.log(this);
    }
  },
}

Thanks in advance.

You can't use an arrow function as vue method if you need access to `this`. Why can't you simply use a normal function? — gbalduzzi, Sep 30 '20 at 14:43

score 0 · Answer 1 · answered Sep 30 '20 at 15:01

It's not recommended that you use arrow functions when declaring methods in your Vue components.

Why not just use someting like this?:

methods:{
  onSubmit(e){
   ...
  }
}

You can refer to other articles about to topics to get detailed info, since there are tons of replies on the same topic already:

How to access the correct `this` inside a callback?

How can you access Data on Vue if using arrow function

1 Answers1