Vue.jsのToDoリストチュートリアル完了できました

Vue.js を利用したサンプルアプリ「Todo リスト」作成。JavaScriptなので情報の保存はブラウザを閉じるまで。何度も使うことで、使い方に慣れるしかない、という感じになってます。

Vue-cliを使うのはまだなので、これから学んで慣れていきたい。

しかし、PHPやRubyなどのサーバーサイドとJSのフロントサイドの2つやれる人ってすごいですね。

今回のソースはこんな感じ

index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Todo List 02</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css" />
</head>

<body>
<div class="container">
<div id="app">
<input type="text" v-model="addText" placeholder="Todoを入力">
<button @click="addTodo()">追加する</button>
<hr>
<table>
<thead>
<tr>
<th>ID</th>
<th>ToDo</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="todo in list" v-if="todo.flag === true">
<td>{{ todo.id }}<br><button @click=changeToDo(todo.id)>作業完了</button></td>
<td>{{ todo.text }}</td>
<td><button @click="deleteToDo(todo.id)">削除</button>
<button @click="editTodo(todo.id)">更新</button>
</td>
</tr>
<tr v-for="todo in list" v-if="todo.flag === false">
<td>{{ todo.id }}<br><button @click=changeToDo(todo.id)>戻す</button></td>
<td>{{ todo.text }}</td>
<td><button @click="deleteToDo(todo.id)">削除</button>
<button @click="editTodo(todo.id)">更新</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>

</html>

app.jsファイル

var app = new Vue({
el: "#app",
data: {
addText: '',
list: [],
uniqueKey: 0,
 },
methods: {
addTodo() {
if(this.addText) {
console.log(this.addText);
this.list.unshift({
text: this.addText,
id: ++this.uniqueKey,
flag: true
 });
this.addText = '';
 }
 },
editTodo(id) {
var newText = window.prompt('以下の内容で更新します');
if(newText === "") {
alert('入力欄が空欄です');
 } else {
this.edit(id, newText);
 }
 },
edit(id, text) {
var editIndex = '';
this.list.some(function(val, index) {
if(val.id === id) {
editIndex = index;
 }
 });
this.list[editIndex].text = text;
 },
deleteToDo(id) {
var delIndex = '';
var check = confirm('本当に削除しますか？');
if(check === true) { // Clicked OK
this.list.some(function(val, index) {
if(val.id === id) {
delIndex = index;
 }
 });
this.list.splice(delIndex, 1);
 }
 },
changeToDo(id) {
var changeIndex = '';
this.list.some(function(val, index){
if(val.id === id) {
changeIndex = index;
 }
 });
this.list[changeIndex].flag = this.change(changeIndex);
 },
change(changeIndex) {
if(this.list[changeIndex].flag === true) {
return false;
 } else {
return true;
 }
 }
 },
})