【Vue】おれおれチュートリアル Ⅱ

Vue　チュートリアルの続きです。

前回は、Vue プロジェクトの作成から、Todo の入力ボックス、追加ボタン、固定データの表示を行いました。まだ実際には動きません。

前回の記事はこちら。
【Vue】おれおれチュートリアル Ⅰ - 山崎屋の技術メモ

GitHubはここ。
https://github.com/yyama694/ore-todo

さっそく続きをやっていきましょう。

Vue.js入門 基礎から実践アプリケーション開発まで

基礎から学ぶ Vue.js

追加ボタンを機能させる

Todo.vue の script タグ内に、追加ボタン押下時の処理を追加していきます。

メソッド名は addTask としました。

Todo.vue の script タグ内です。

<script>
export default {
    data() {
        return {
            list: [
               { id:1, value: "たまご買う" },
               { id:2, value: "図書館に本を返す" },
               { id:3, value: "宅急便を受け取る" }
            ],
            newTask: "",
            nextId: 4
        }
    } ,
    methods : {
        addTask() {
            this.list.push({
                id: this.nextId++,
                value: this.newTask
            })
        }
    }
}
</script>

また、data の部分に変数を２つ追加しておきました。

newTask はユーザ入力の追加タスクを格納する文字列。

nextId は追加するときの id に使用します。追加するたびインクリメントしていきます。

テンプレート側は、テキストボックスと追加ボタンのタグを修正します。

Todo.vue の template タグ内です。

<template>
    <div>
        <h1>Todo List</h1>
        <input type="text" v-model="newTask"> // v-model を追加した
        <input type="button" value="追加" v-on:click="addTask"> // v-on:click を追加した
        <div class="list">
            <ul>
                <li v-for="item in list" :key="item.id">{{ item.value }}</li>
            </ul>
        </div>
    </div>
</template>

ソース中のコメントにあるとおり、２行修正しています。

これで Todo の追加が行えるようになりました。

追加時のチェック追加

いまのままでは、テキストボックスが空の状態でも Todo リストに追加が行えてしまいます。

addTask メソッドにチェック処理を追加し、空文字の場合は何もしないように修正しましょう。

ついでに、追加処理が行われた後は、テキストボックスの内容を空に戻す処理も追加します。

Todo.vue の script タグ、methods 内。ソース内のコメントのとおり処理を追加しました。

    methods : {
        addTask() {
            // 空の場合は処理をスキップ
            if(!this.newTask.trim()) {
                return
            }
            this.list.push({
                id: this.nextId++,
                value: this.newTask
            })
            // 追加処理のあと、テキストボックスを空にする
            this.newTask = ""
        }
    }

今日はここまでとします。

最後に Todo.vue の全量を掲載しておきます。ソースの全量は GitHub においておきます。
https://github.com/yyama694/ore-todo
「追加機能の処理改善」というコミットがここまでのソースです。

<template>
    <div>
        <h1>Todo List</h1>
        <input type="text" v-model="newTask">
        <input type="button" value="追加" v-on:click="addTask">
        <div class="list">
            <ul>
                <li v-for="item in list" :key="item.id">{{ item.value }}</li>
            </ul>
        </div>
    </div>
</template>
    
<script>
export default {
    data() {
        return {
            list: [
               { id:1, value: "たまご買う" },
               { id:2, value: "図書館に本を返す" },
               { id:3, value: "宅急便を受け取る" }
            ],
            newTask: "",
            nextId: 4
        }
    } ,
    methods : {
        addTask() {
            if(!this.newTask.trim()) {
                return
            }
            this.list.push({
                id: this.nextId++,
                value: this.newTask
            })
            this.newTask = ""
        }
    }
}
</script>

<style scoped>
.list{
    width: 60%;
    margin: auto;
    text-align: left;
}
</style>

それでは！

次回へのリンクです。
【Vue】おれおれチュートリアル Ⅲ - 山崎屋の技術メモ