Vue.js: Update to 2.1.8 (#1734)

ae2dd195 · Sun Zheng'an · Pascal Hartig · 50d46b4c · ae2dd195 · ae2dd195
Commit ae2dd195 authored Dec 31, 2016 by Sun Zheng'an Committed by Pascal Hartig Dec 31, 2016
4 changed files
--- a/examples/vue/index.html
+++ b/examples/vue/index.html
@@ -8,12 +8,12 @@
 		<style> [v-cloak] { display: none; } </style>
 	</head>
 	<body>
-		<section class="todoapp">
+		<section class="todoapp" v-cloak>
 			<header class="header">
 				<h1>todos</h1>
 				<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo">
 			</header>
-			<section class="main" v-show="todos.length" v-cloak>
+			<section class="main" v-show="todos.length">
 				<input class="toggle-all" type="checkbox" v-model="allDone">
 				<ul class="todo-list">
 					<li class="todo" v-for="todo in filteredTodos" :class="{completed: todo.completed, editing: todo == editedTodo}">
@@ -26,9 +26,9 @@
 					</li>
 				</ul>
 			</section>
-			<footer class="footer" v-show="todos.length" v-cloak>
+			<footer class="footer" v-show="todos.length">
 				<span class="todo-count">
-					<strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left
+					<strong v-text="remaining"></strong> {{pluralize('item', remaining)}} left
 				</span>
 				<ul class="filters">
 					<li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>

--- a/examples/vue/js/app.js
+++ b/examples/vue/js/app.js
@@ -66,6 +66,10 @@
 		// note there's no DOM manipulation here at all.
 		methods: {

+			pluralize: function (word, count) {
+				return word + (count === 1 ? '' : 's');
+			},
+
 			addTodo: function () {
 				var value = this.newTodo && this.newTodo.trim();
 				if (!value) {
@@ -76,7 +80,8 @@
 			},

 			removeTodo: function (todo) {
-				this.todos.$remove(todo);
+				var index = this.todos.indexOf(todo);
+				this.todos.splice(index, 1);
 			},

 			editTodo: function (todo) {
@@ -109,14 +114,10 @@
 		// before focusing on the input field.
 		// http://vuejs.org/guide/custom-directive.html
 		directives: {
-			'todo-focus': function (value) {
-				if (!value) {
-					return;
-				}
-				var el = this.el;
-				Vue.nextTick(function () {
+			'todo-focus': function (el, binding) {
+				if (binding.value) {
 					el.focus();
-				});
+				}
 			}
 		}
 	});

--- a/examples/vue/node_modules/vue/dist/vue.js
+++ b/examples/vue/node_modules/vue/dist/vue.js
--- a/examples/vue/package.json
+++ b/examples/vue/package.json
@@ -2,7 +2,7 @@
  "private": true,
  "dependencies": {
    "director": "^1.2.0",
-    "vue": "^1.0.1",
+    "vue": "^2.1.8",
    "todomvc-common": "^1.0.1",
    "todomvc-app-css": "^2.0.0"
  }