how to access data from inside a method

Question

I'm new to vue.js. I'm starting to migrate my angularjs app. I'm using vue cli to generate a new simple-webpack project. This creates a new webpack+vueLoader project. Everything went smoothly but now I have an issue. on my @click event I want to change my data but I can't access the object. 'this' is not the data instance.

What am I missing here?

<template>
    <input type="radio" name="account-type" @click="setAccountType(item.id)"/><span>{{item.name}}</span>
</template>
<script>
  export default {
     data() {
        return { accountType: null
     },
     methods: { setAccountType: (typeId) => this.accountType = typeId
  }
</script>

this is not the data instance as expected and thus ui not updated. In vuejs doc i can see just addressing this is sufficient while in a method: vue js doc

Any help is appreciated.

Kind regards.

Answer 1

You cannot use an arrow function to refer to this inside a Vue instance to get Vue instance data because this refers to window, the correct ES6 syntax is:

 setAccountType(typeId){
   this.accountType = typeId
 }

JSFiddle with Arrow function: https://jsfiddle.net/zxqohh0L/

JSFiddle with non arrow ES6 function: https://jsfiddle.net/zxqohh0L/1/

You can still use arrow functions inside the methods themselves.