My days of...

生活のことなど、がんばろう

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


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

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

しかし、PHPRubyなどのサーバーサイドと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>
</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="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;
}
}
},
})

こちらで勉強させていただきました

JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう(前編) : ビジネスとIT活用に役立つ情報

JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう(後編) : ビジネスとIT活用に役立つ情報

 

JavaScript コードレシピ集

JavaScript コードレシピ集