How to access Vue.js component data from a method?

Question

Based on vuejs docs I would expect the following code to work, but this is null when I click the button:

<template>
    <div class="hello">
        <button v-on:click="test">Test </button>
    </div>
</template>

<script>
    export default {
  name: 'hello',
    methods: {
        test: () => {
            console.log('log data.message', this.msg); 
        }
    },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Here is the full demo: https://codesandbox.io/s/vq3ovx9n70

Answer 1

Change your test() method to:

test: function() {
        console.log('log data.message', this.msg); 
    }

Arrow functions don't bind this the way you want here.