Vue.jsを使って、リアルタイムで検索結果を表示する検索フォームを実装することを考えます。 検索フォームに打ち込んだ文字列をタイトルに含むタスクのみが画面上に表示されるようにします。 task/index.vue <template> <label for="search">絞り込み</label> <input id="search" v-model="searchTask" // dataに定義したsearchTaskに入力した文字列を入れ込む type="text" placeholder="タスク名を入力してください" class="form-control" > </template>

ログイン機能を実装しているタスク管理アプリで、 個々のユーザーがプロフィール画像を登録できるように、画像アップロード機能を実装することを考えます。 RailsのActiveStorageを使って画像登録します。 ①userモデルにプロフィール画像用のカラム(avatar)…

VeeValidateを使って、タスク追加・編集フォームのバリデーションチェックを行っていきます。 フォームに入力されたデータに対して、リアルタイムでエラーを表示させることができるようになります。 ①インストール yarn add vee-validate // もしくは npm in…

Vue.jsとrailsでタスク管理アプリを作りながら勉強してます。 今回はタスクを3つ(TODO、DOING、DONE)に分けて、 なおかつタスクの一覧(TaskList)とタスク単体(TaskItem)を別のコンポーネントに分割していきたいと思います。 コンポーネント間の関係：index(…