Forked from: FumioNonaka's Vue.js: TodoMVC part 04 View Diff (37) Vue.js: TodoMVC part 05 FumioNonaka Follow 2017-07-09 23:03:03 License: MIT License Fork2 Fav0 View1211 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 130 lines HTML 48 lines CSS 4 lines 「Vue.js: TodoMVCをつくる 05 ー 項目のテキストを再編集できるようにする」 Todoリストにすでに入力した項目のテキストをダブルクリックで書き替え、[return]/[Enter]キーで確定、[esc]キーでキャンセルできるようにした。 Creation of "TodoMVC Example" is divided into five steps and this code is final. part 01 part 02 part 03 part 04 Vue.js: TodoMVC part 05 // forked from FumioNonaka's "Vue.js: TodoMVC part 04" http://jsdo.it/FumioNonaka/KpRM var STORAGE_KEY = 'todos-vuejs-2.0'; var todoStorage = { fetch: function() { var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); todos.forEach(function(todo, index) { todo.id = index; }); todoStorage.uid = todos.length; return todos; }, save: function(todos) { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)); } }; 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; }); } }; var app = new Vue({ data: { todos: todoStorage.fetch(), newTodo: '', editedTodo: null, visibility: 'all' }, watch: { todos: { handler: function(todos) { todoStorage.save(todos); }, deep: true } }, computed: { filteredTodos: function() { return filters[this.visibility](this.todos); }, remaining: function() { var todos = filters.active(this.todos); return todos.length; }, allDone: { get: function() { return this.remaining === 0; }, set: function(value) { this.todos.forEach(function(todo) { todo.completed = value; }); } } }, filters: { pluralize: function(n) { return n === 1 ? 'item' : 'items'; } }, methods: { addTodo: function() { var value = this.newTodo && this.newTodo.trim(); if (!value) { return; } this.todos.push({ id: todoStorage.uid++, title: value, completed: false }); this.newTodo = ''; }, removeTodo: function(todo) { this.todos.splice(this.todos.indexOf(todo), 1); }, editTodo: function(todo) { this.beforeEditCache = todo.title; this.editedTodo = todo; }, doneEdit: function(todo) { if (!this.editedTodo) { return; } this.editedTodo = null; var title = todo.title.trim(); if (title) { todo.title = title; } else { this.removeTodo(todo); } }, cancelEdit: function(todo) { this.editedTodo = null; todo.title = this.beforeEditCache; }, removeCompleted: function() { this.todos = filters.active(this.todos); } }, directives: { 'todo-focus': function(element, binding) { if (binding.value) { element.focus(); } } } }); function onHashChange() { var visibility = window.location.hash.replace(/#\/?/, ''); if (filters[visibility]) { app.visibility = visibility; } else { window.location.hash = ''; app.visibility = 'all'; } } window.addEventListener('hashchange', onHashChange); onHashChange(); app.$mount('.todoapp'); <link href="https://unpkg.com/todomvc-app-css@2.0.6/index.css" rel="stylesheet"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <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" @keydown.enter="addTodo"> </header> <section class="main" v-show="todos.length" v-cloak> <input class="toggle-all" type="checkbox" v-model="allDone"> <ul class="todo-list"> <li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{completed: todo.completed, editing: todo == editedTodo}"> <div class="view"> <input class="toggle" type="checkbox" v-model="todo.completed"> <label @dblclick="editTodo(todo)">{{todo.title}}</label> <button class="destroy" @click="removeTodo(todo)"></button> </div> <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @keydown.enter="doneEdit(todo)" @keydown.esc="cancelEdit(todo)" @blur="doneEdit(todo)"> </li> </ul> </section> <footer class="footer" v-show="todos.length" v-cloak> <span class="todo-count"> <strong>{{remaining}}</strong> {{remaining | pluralize}} left </span> <ul class="filters"> <li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li> <li><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li> <li><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li> </ul> <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining"> Clear completed </button> </footer> </section> Vue.js: TodoMVC part 05 [v-cloak] { display: none; } ###「[Vue.js: TodoMVCをつくる 05 ー 項目のテキストを再編集できるようにする](http://fumiononaka.com/Business/html5/FN1707004.html)」 Todoリストにすでに入力した項目のテキストをダブルクリックで書き替え、[return]/[Enter]キーで確定、[esc]キーでキャンセルできるようにした。 ___ Creation of "[TodoMVC Example](https://vuejs.org/v2/examples/todomvc.html)" is divided into five steps and this code is final. * [part 01](http://jsdo.it/FumioNonaka/wro8) * [part 02](http://jsdo.it/FumioNonaka/8eUF) * [part 03](http://jsdo.it/FumioNonaka/I78z) * [part 04](http://jsdo.it/FumioNonaka/KpRM) // forked from FumioNonaka's "Vue.js: TodoMVC part 04" http://jsdo.it/FumioNonaka/KpRM var STORAGE_KEY = 'todos-vuejs-2.0'; var todoStorage = { fetch: function() { var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); todos.forEach(function(todo, index) { todo.id = index; }); todoStorage.uid = todos.length; return todos; }, save: function(todos) { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)); } }; 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; }); } }; var app = new Vue({ data: { todos: todoStorage.fetch(), newTodo: '', editedTodo: null, visibility: 'all' }, watch: { todos: { handler: function(todos) { todoStorage.save(todos); }, deep: true } }, computed: { filteredTodos: function() { return filters[this.visibility](this.todos); }, remaining: function() { var todos = filters.active(this.todos); return todos.length; }, allDone: { get: function() { return this.remaining === 0; }, set: function(value) { this.todos.forEach(function(todo) { todo.completed = value; }); } } }, filters: { pluralize: function(n) { return n === 1 ? 'item' : 'items'; } }, methods: { addTodo: function() { var value = this.newTodo && this.newTodo.trim(); if (!value) { return; } this.todos.push({ id: todoStorage.uid++, title: value, completed: false }); this.newTodo = ''; }, removeTodo: function(todo) { this.todos.splice(this.todos.indexOf(todo), 1); }, editTodo: function(todo) { this.beforeEditCache = todo.title; this.editedTodo = todo; }, doneEdit: function(todo) { if (!this.editedTodo) { return; } this.editedTodo = null; var title = todo.title.trim(); if (title) { todo.title = title; } else { this.removeTodo(todo); } }, cancelEdit: function(todo) { this.editedTodo = null; todo.title = this.beforeEditCache; }, removeCompleted: function() { this.todos = filters.active(this.todos); } }, directives: { 'todo-focus': function(element, binding) { if (binding.value) { element.focus(); } } } }); function onHashChange() { var visibility = window.location.hash.replace(/#\/?/, ''); if (filters[visibility]) { app.visibility = visibility; } else { window.location.hash = ''; app.visibility = 'all'; } } window.addEventListener('hashchange', onHashChange); onHashChange(); app.$mount('.todoapp'); <link href="https://unpkg.com/todomvc-app-css@2.0.6/index.css" rel="stylesheet"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <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" @keydown.enter="addTodo"> </header> <section class="main" v-show="todos.length" v-cloak> <input class="toggle-all" type="checkbox" v-model="allDone"> <ul class="todo-list"> <li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{completed: todo.completed, editing: todo == editedTodo}"> <div class="view"> <input class="toggle" type="checkbox" v-model="todo.completed"> <label @dblclick="editTodo(todo)">{{todo.title}}</label> <button class="destroy" @click="removeTodo(todo)"></button> </div> <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @keydown.enter="doneEdit(todo)" @keydown.esc="cancelEdit(todo)" @blur="doneEdit(todo)"> </li> </ul> </section> <footer class="footer" v-show="todos.length" v-cloak> <span class="todo-count"> <strong>{{remaining}}</strong> {{remaining | pluralize}} left </span> <ul class="filters"> <li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li> <li><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li> <li><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li> </ul> <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining"> Clear completed </button> </footer> </section> [v-cloak] { display: none; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? ###「[Vue.js: TodoMVCをつくる 05 ー 項目のテキストを再編集できるようにする](http://fumiononaka.com/Business/html5/FN1707004.html)」 Todoリストにすでに入力した項目のテキストをダブルクリックで書き替え、[return]/[Enter]キーで確定、[esc]キーでキャンセルできるようにした。 ___ Creation of "[TodoMVC Example](https://vuejs.org/v2/examples/todomvc.html)" is divided into five steps and this code is final. * [part 01](http://jsdo.it/FumioNonaka/wro8) * [part 02](http://jsdo.it/FumioNonaka/8eUF) * [part 03](http://jsdo.it/FumioNonaka/I78z) * [part 04](http://jsdo.it/FumioNonaka/KpRM) Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author FumioNonaka URLhttp://www.fumiononaka.com/ Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/g7mG/js"></script> application html5_elements&api javascript library&test Vue.js Discussion Questions on this code? Tags Vue.js application html5_elements&api javascript library&test Forked sort by latest page views favorite forked Vue.js + ES6: TodoMVC FumioNonaka 10 1554 131/48/4 Vue.js application html5_elements&api javascript library&test Vue.js: TodoMVC original FumioNonaka 00 455 126/48/4 Vue.js application html5_elements&api javascript library&test