Commit ae2dd195 authored by Sun Zheng'an's avatar Sun Zheng'an Committed by Pascal Hartig

Vue.js: Update to 2.1.8 (#1734)

parent 50d46b4c
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
<style> [v-cloak] { display: none; } </style> <style> [v-cloak] { display: none; } </style>
</head> </head>
<body> <body>
<section class="todoapp"> <section class="todoapp" v-cloak>
<header class="header"> <header class="header">
<h1>todos</h1> <h1>todos</h1>
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo"> <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo">
</header> </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"> <input class="toggle-all" type="checkbox" v-model="allDone">
<ul class="todo-list"> <ul class="todo-list">
<li class="todo" v-for="todo in filteredTodos" :class="{completed: todo.completed, editing: todo == editedTodo}"> <li class="todo" v-for="todo in filteredTodos" :class="{completed: todo.completed, editing: todo == editedTodo}">
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
</li> </li>
</ul> </ul>
</section> </section>
<footer class="footer" v-show="todos.length" v-cloak> <footer class="footer" v-show="todos.length">
<span class="todo-count"> <span class="todo-count">
<strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left <strong v-text="remaining"></strong> {{pluralize('item', remaining)}} left
</span> </span>
<ul class="filters"> <ul class="filters">
<li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li> <li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>
......
...@@ -66,6 +66,10 @@ ...@@ -66,6 +66,10 @@
// note there's no DOM manipulation here at all. // note there's no DOM manipulation here at all.
methods: { methods: {
pluralize: function (word, count) {
return word + (count === 1 ? '' : 's');
},
addTodo: function () { addTodo: function () {
var value = this.newTodo && this.newTodo.trim(); var value = this.newTodo && this.newTodo.trim();
if (!value) { if (!value) {
...@@ -76,7 +80,8 @@ ...@@ -76,7 +80,8 @@
}, },
removeTodo: function (todo) { removeTodo: function (todo) {
this.todos.$remove(todo); var index = this.todos.indexOf(todo);
this.todos.splice(index, 1);
}, },
editTodo: function (todo) { editTodo: function (todo) {
...@@ -109,14 +114,10 @@ ...@@ -109,14 +114,10 @@
// before focusing on the input field. // before focusing on the input field.
// http://vuejs.org/guide/custom-directive.html // http://vuejs.org/guide/custom-directive.html
directives: { directives: {
'todo-focus': function (value) { 'todo-focus': function (el, binding) {
if (!value) { if (binding.value) {
return;
}
var el = this.el;
Vue.nextTick(function () {
el.focus(); el.focus();
}); }
} }
} }
}); });
......
This diff is collapsed.
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"director": "^1.2.0", "director": "^1.2.0",
"vue": "^1.0.1", "vue": "^2.1.8",
"todomvc-common": "^1.0.1", "todomvc-common": "^1.0.1",
"todomvc-app-css": "^2.0.0" "todomvc-app-css": "^2.0.0"
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment