Vue.jsでTodoアプリを作りたい

やりたいこと
**
modal-window内の登録ボタンを押したら、モーダルの中の入力値を引き継いでそれをテーブル<tr>に反映したい。**

よくあるTodoアプリかと思います。
今回使用するディレクティブとして、v-on v-model等があるかと思いますが、メソッドの書き方がわからない状態です。
registerTodo() {
// dataプロパティのtodosに新しいtodoを追加する。

},

ここに配列を追加していって、テーブルレイアウトに入れていくような感じになるのでしょうか。

今回は環境構築はなしで、いったんcdnを使ってやっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueでToDOアプリを作る</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- css -->
    <style>
        .btn{
            margin: 40px 0 20px;
        }
        .modal{
            display: block;
        }
        .btn-secondary{
          margin-right: 12px;
        }
        .list-block{
          margin-bottom: 24px;
        }
        #task-name{
          width: 65%;
        }
        .modal-body{
          padding: 32px;
        }
        input{
          margin-top: 8px;
        }
    </style>
    <!-- //css -->

    <!-- vueが適用される範囲 -->
    <div id="app">
        <div class="container">
            <button type="button" class="btn btn-primary" v-on:click="modalwindow = true">登録</button>

            <table class="table">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">タスク名</th>
                    <th scope="col">実行日</th>
                    <th scope="col"></th>
                  </tr>
                </thead>
                
                <tbody>
                  <tr>
                    <th scope="row">{{index}}</th>
                    <td>{{todo}}</td>
                    <td>{{dueDate}}</td>
                    <td></td>
                  </tr>

                </tbody>
              </table>

            <!-- modal-window -->
              <div class="modal" tabindex="-1" v-if="modalwindow">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">タスクを登録する</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" v-on:click="modalwindow = false"></button>
                    </div>

                    <div class="modal-body">
                      
                        <div class="list-block">
                          <label for="task-name">タスク名</label><br>
                          <input type="text" id="task-name" placeholder="タスク名を入力してください" v-model="newItem">
                        </div>
                        
                        <div class="list-block">
                          <label for="task-name">日時</label><br>
                          <input type="date" v-model="days">
                        </div>

                    </div>

                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" v-on:click="modalwindow = false">キャンセル</button>
                      <button type="button" class="btn btn-primary" v-on:click="addItem">登録</button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- //modal-window -->
        </div>
    </div>
    <!-- //vueが適用される範囲 -->


    <!-- vue -->
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                modalwindow:false,

                taskName:"",

                dueDate:"",

                todos:[
                  {
                    index: 1,
                    todo: "JSを勉強する",
                    dueDate: "2020/03/01"
                  }
                ],
            },

            methods: {
              showModal() {
                // モーダルを表示する。
              },
              closeModal() {
                // モーダルを非表示にする。
              },
              registerTodo() {
                // dataプロパティのtodosに新しいtodoを追加する。
                
              },
              deleteTodo() {
                // dataプロパティのtodosから該当のデータを探してtodoを削除します。
              }
            }


        })
    </script>
    <!-- //vue -->
</body>
</html>


<!-- ①registerTodoメソッドを作成、data内に新しい配列を作成するメソッドを作成する 
  →もし、登録ボタンがクリックされたら、その際に入力された値をdataに追加
-->

<!-- ②dataに追加された配列をテーブルレイアウトに追加していく

行動規範の内容に同意します

回答1件

ベストアンサー

つまづいている部分にうまく答えられているかわかりませんが、
配列になっているtodosの表示にはv-forを用います。
要素を配列に追加する方法がわからない、ということであればpush関数を使います。

python
1this.todos.push({
2  index: this.todos.length+1,
3  todo: this.newItem,
4  dueDate: this.days
5});

書き方の例

投稿2021/02/15 16:51

aoies

総合スコア331

退会済みユーザー

2021/02/17 02:38

ありがとうございます！少しづつ構造がわかってきました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

Vue.jsでTodoアプリを作りたい

関連した質問