Vue.js入門#10 – Vue.jsでWebアプリケーションを作ろう！

タスクを表示しよう＆バリデーション【Vue3】

今回の記事では、Vue.jsを使用してWebアプリケーションを作成する方法について見ていきます。また、タスクを表示する方法とバリデーションの実装についても解説します。

タスクの表示

まずは、Vue.jsを使用してタスクを表示する方法について見ていきましょう。以下のコードは、タスクを表示するためのVueコンポーネントを定義する例です。

    
      <template>
        <div>
          <ul>
            <li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
          </ul>
        </div>
      </template>

      <script>
        export default {
          data() {
            return {
              tasks: [
                { id: 1, name: 'Task 1' },
                { id: 2, name: 'Task 2' },
                { id: 3, name: 'Task 3' }
              ]
            };
          }
        };
      </script>
    
  

バリデーションの実装

次に、Vue.jsを使用してフォームのバリデーションを実装する方法について見ていきましょう。以下の例では、入力値の長さが3文字以上であることをバリデーションしています。

    
      <template>
        <div>
          <input v-model="taskName" />
          <button @click="addTask">Add Task</button>
          <span v-if="errorMessage" style="color: red">{{ errorMessage }}</span>
        </div>
      </template>

      <script>
        export default {
          data() {
            return {
              taskName: '',
              errorMessage: ''
            };
          },
          methods: {
            addTask() {
              if (this.taskName.length >= 3) {
                this.tasks.push({ id: this.tasks.length + 1, name: this.taskName });
                this.taskName = '';
                this.errorMessage = '';
              } else {
                this.errorMessage = 'Task name must be at least 3 characters long';
              }
            }
          }
        };
      </script>
    
  

以上で、Vue.jsを使用してWebアプリケーションを作成し、タスクの表示とバリデーションの実装について解説しました。これらの機能を組み合わせることで、より複雑なWebアプリケーションを開発することができます。ぜひ、自分で試してみてください！