この記事の目的
vue.jsの勉強のために以下の仕様のtodoアプリを作成する。
- formからsubmitするとtodoに表示される
- deleteで消せる
v-forでループ処理する
main.js
(function(){
'use strict';
var vm = new Vue({
el: '#app',
data: {
todos: [
'task 1',
'task 2',
'task 3'
]
}
});
})();
main.jsにtodosというプロパティをもって直書きでまずtaskを３つ入れる。これをループで３つとも表示するために
index.html
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Myvueapp</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p>
<input type="text" v-model="name" />
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/main.js"></script>
</body>
</html>
v-for="todo in todosと記述し、todosの要素をtodoとしてあるだけループするようにする。
submitでtodo追加
main.js
(function(){
'use strict';
var vm = new Vue({
el: '#app',
data: {
newItem: '',
todos: [
'task 1',
'task 2',
'task 3'
]
},
methods: {
addItem: function(){
this.todos.push(this.newItem);
this.newItem = '';
}
}
});
})();
index.html
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Myvueapp</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<form v-on:submit.prevent=addItem>
<input type="text" v-model="newItem" />
<input type="submit" value="Add" />
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/main.js"></script>
</body>
</html>
- v-onでsubmit時にaddItemを発火
- addItem関数でtodosの配列にnewItemを入れる
- その後値をリセットするために空の値を代入
todoの削除
main.js
(function(){
'use strict';
var vm = new Vue({
el: '#app',
data: {
newItem: '',
todos: [
'task 1',
'task 2',
'task 3'
]
},
methods: {
addItem: function(){
this.todos.push(this.newItem);
this.newItem = '';
},
deleteItem:function(index){
if(confirm('are you sure?')){
this.todos.splice(index, 1);
}
}
}
});
})();
index.html
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Myvueapp</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<ul>
<li v-for="(todo, index) in todos">
{{ todo }}
<span @click="deleteItem">☓</span>
</li>
</ul>
<form v-on:submit.prevent=addItem>
<input type="text" v-model="newItem" />
<input type="submit" value="Add" />
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/main.js"></script>
</body>
</html>
- v-forでindexを受け取る
- @click="deleteItem"で関数を発火
- ダイアログで確認してokならspliceで削除。
- http://www.htmq.com/js/array_splice.shtml
- 第一引数・・・追加・削除する位置（配列の要素数より大きい値を指定すると配列の末尾となる。負の数値を指定すると配列の末尾から引いた位置となる）
- 第二引数・・・削除する要素の数