Bryce Johnson Bryce Johnson - 1 year ago 64
Javascript Question

Why isn't my Vue method referring to the proper context (data)?


is triggered and I inspect
inside of it, the context is the browser window, not the
object. So
ends up being undefined.

Any idea what I'm missing?


<div id="todo-list">
<input type="text" v-model="newTodo">
<button v-on:click="addTodo">Add</button>
<li v-if="todos.length" v-for="todo in todos" class="todo-item">
{{ todo }}


new Vue({
el: '#todo-list',
data: {
todos: [],
newTodo: ''
methods: {
addTodo: () => {
clearNewTodo: () => {
this.newTodo = '';

Answer Source

Quick fix: don't use arrow functions to declare your Vue methods.

So, your methods object should look like this:

methods: {
    addTodo: function() {
    clearNewTodo: function() {
      this.newTodo = '';


Why does this work?

You're expecting the ES6 arrow function () => {} syntax to set the context (this) the same as the old function declaration syntax function () {} would.

From MDN:

Until arrow functions, every new function defined its own this value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.

I don't know a ton about how Vue.js sets/handles context at this point, but it looks like your method is being called from your template/the DOM and the context is being passed from there into your method. Since the arrow function inherits its context, this refers to the window object.