update Vue.js example to 0.12.8

examples/vue/index.html

@@ -11,29 +11,29 @@
 		<section class="todoapp">
 			<header class="header">
 				<h1>todos</h1>
-				<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" v-on="keyup:addTodo | key enter">
+				<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" v-on="keyup:addTodo | key 'enter'">
 			</header>
 			<section class="main" v-show="todos.length" v-cloak>
 				<input class="toggle-all" type="checkbox" v-model="allDone">
 				<ul class="todo-list">
-					<li class="todo" v-repeat="todos | filterTodos" v-class="completed: completed, editing: this == editedTodo">
+					<li class="todo" v-repeat="todo: filteredTodos" v-class="completed: todo.completed, editing: todo == editedTodo">
 						<div class="view">
-							<input class="toggle" type="checkbox" v-model="completed">
-							<label v-text="title" v-on="dblclick: editTodo(this)"></label>
-							<button class="destroy" v-on="click: removeTodo(this)"></button>
+							<input class="toggle" type="checkbox" v-model="todo.completed">
+							<label v-on="dblclick: editTodo(todo)">{{todo.title}}</label>
+							<button class="destroy" v-on="click: removeTodo(todo)"></button>
 						</div>
-						<input class="edit" type="text" v-model="title" v-todo-focus="this == editedTodo" v-on="blur: doneEdit(this), keyup: doneEdit(this) | key enter, keyup: cancelEdit(this) | key esc">
+						<input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" v-on="blur: doneEdit(todo), keyup: doneEdit(todo) | key 'enter', keyup: cancelEdit(todo) | key 'esc'">
 					</li>
 				</ul>
 			</section>
 			<footer class="footer" v-show="todos.length" v-cloak>
 				<span class="todo-count">
-					<strong v-text="remaining"></strong> {{remaining | pluralize item}} left
+					<strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left
 				</span>
 				<ul class="filters">
-					<li><a href="#/all" v-class="selected: activeFilter == 'all'">All</a></li>
-					<li><a href="#/active" v-class="selected: activeFilter == 'active'">Active</a></li>
-					<li><a href="#/completed" v-class="selected: activeFilter == 'completed'">Completed</a></li>
+					<li><a href="#/all" v-class="selected: visibility == 'all'">All</a></li>
+					<li><a href="#/active" v-class="selected: visibility == 'active'">Active</a></li>
+					<li><a href="#/completed" v-class="selected: visibility == 'completed'">Completed</a></li>
 				</ul>
 				<button class="clear-completed" v-on="click:removeCompleted" v-show="todos.length > remaining">
 					Clear completed

examples/vue/js/app.js

@@ -4,6 +4,22 @@
 
 	'use strict';
 
+	var filters = {
+		all: function (todos) {
+			return todos;
+		},
+		active: function (todos) {
+			return todos.filter(function (todo) {
+				return !todo.completed;
+			});
+		},
+		completed: function (todos) {
+			return todos.filter(function (todo) {
+				return todo.completed;
+			});
+		}
+	};
+
 	exports.app = new Vue({
 
 		// the root element that will be compiled
@@ -14,25 +30,14 @@
 			todos: todoStorage.fetch(),
 			newTodo: '',
 			editedTodo: null,
-			activeFilter: 'all',
-			filters: {
-				all: function () {
-					return true;
-				},
-				active: function (todo) {
-					return !todo.completed;
-				},
-				completed: function (todo) {
-					return todo.completed;
-				}
-			}
+			visibility: 'all'
 		},
 
 		// ready hook, watch todos change for data persistence
 		ready: function () {
 			this.$watch('todos', function (todos) {
 				todoStorage.save(todos);
-			}, true);
+			}, { deep: true });
 		},
 
 		// a custom directive to wait for the DOM to be updated
@@ -50,18 +55,14 @@
 			}
 		},
 
-		// a custom filter that filters the displayed todos array
-		filters: {
-			filterTodos: function (todos) {
-				return todos.filter(this.filters[this.activeFilter]);
-			}
-		},
-
 		// computed properties
 		// http://vuejs.org/guide/computed.html
 		computed: {
+			filteredTodos: function () {
+				return filters[this.visibility](this.todos);
+			},
 			remaining: function () {
-				return this.todos.filter(this.filters.active).length;
+				return filters.active(this.todos).length;
 			},
 			allDone: {
 				get: function () {
@@ -89,7 +90,7 @@
 			},
 
 			removeTodo: function (todo) {
-				this.todos.$remove(todo.$data);
+				this.todos.$remove(todo);
 			},
 
 			editTodo: function (todo) {
@@ -114,7 +115,7 @@
 			},
 
 			removeCompleted: function () {
-				this.todos = this.todos.filter(this.filters.active);
+				this.todos = filters.active(this.todos);
 			}
 		}
 	});

examples/vue/js/routes.js

@@ -6,16 +6,16 @@
 
 	var router = new Router();
 
-	Object.keys(app.filters).forEach(function (filter) {
-		router.on(filter, function () {
-			app.activeFilter = filter;
+	['all', 'active', 'completed'].forEach(function (visibility) {
+		router.on(visibility, function () {
+			app.visibility = visibility;
 		});
 	});
 
 	router.configure({
 		notfound: function () {
 			window.location.hash = '';
-			app.activeFilter = 'all';
+			app.visibility = 'all';
 		}
 	});
 

examples/vue/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "dependencies": {
     "director": "^1.2.0",
-    "vue": "^0.11.5",
+    "vue": "^0.12.8",
     "todomvc-common": "^1.0.1",
     "todomvc-app-css": "^2.0.0"
   }