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

Any idea what I'm missing?

HTML:

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

JS:

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

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

Any idea what I'm missing?

HTML:

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

JS:

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

• javascript
• vue.js

• Why do you use addTodo: () => { instead of addTodo: function() { } - anyways your code is correct, this.todos should definetly be defined. Try to pare your code with the example: vuejs/examples/svg.html – xate Commented Jul 28, 2016 at 21:28
• @Xatenev I guess I find it shorter and cleaner. It's ES6. But your mentioning that reminded me that ES6 arrow functions don't behave the same as the old function syntax when setting the context (this) and ... changing it to the old syntax fixes the problem. I'm going to write up an answer for why this works in a sec, unless you do. – Bryce Johnson Commented Jul 28, 2016 at 21:37
• 3 () => changes the value of this to the enclosing context. In this case, the this may be equal to window. There's your problem. If you want something concise you can use addTodos() {} instead of addTodos: function() {}. – Dan Commented Jul 28, 2016 at 21:44

3 Answers 3

It looks like the ES6 arrow syntax is your problem. Change it to use the traditional function() syntax and it will work:

addTodo: function() {
  this.todos.push(this.newTodo);
  this.clearNewTodo();
},
clearNewTodo: function() {
  this.newTodo = '';
}

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

What's the problem?

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

Why is that a problem?

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.

So, your methods object should look like this (using the old function syntax):

methods: {
    addTodo: function() {
      this.todos.push(this.newTodo);
      this.clearNewTodo();
    },
    clearNewTodo: function() {
      this.newTodo = '';
    }

}

Or this (using the new method definition syntax)

methods: {
    addTodo() {
      this.todos.push(this.newTodo);
      this.clearNewTodo();
    },
    clearNewTodo() {
      this.newTodo = '';
    }
  }

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.

Using actual function declarations will preserve a proper reference to the this you want.

Your arrow Vue methods are already getting the this object as the first parameter, so:

methods: {
    addTodo: (_this) => {
      _this.todos.push(_this.newTodo);
      _this.clearNewTodo();
    },
    clearNewTodo: (_this) => {
      _this.newTodo = '';
    }
  }

does the trick, but I am not sure that arrow functions are contributing anything here.