はじめに Vue.jsで下にスクロールした際に、上に戻れるボタンを実装する方法について。 上に戻るボタンを追加 まずはreturnTop()というクリックイベントを設定します。 <div class="return_top_button btn btn-secondary" @click="returnTop()"> <font-awesome-icon icon="chevron-circle-up" /> </div> 続いてreturnTop()メソッドの処理を追加します。 <script> export default { name: 'JokeInde…

はじめに yarnを使ってVue.jsにFontAwesomeを導入する方法について 導入方法 まずはyarnを使ってFontAwesomeをインストールします。 $ yarn add @fortawesome/fontawesome-svg-core $ yarn add @fortawesome/free-solid-svg-icons $ yarn add @fortawesome/v…

はじめに Vue.jsでリアルタイム検索機能をつくる方法について 設定方法 <template> <div class="container-fluid"> <div id="search-form" class="form-row p-3" > <div class="form-group col-lg-6 offset-lg-3"> <label for="search">絞り込み</label> </div></div></div></template>

はじめに VeeValidateを使ってバリデーションをつくる方法について VeeValidateをインストール $ yarn add vee-validate VeeValidateの設定ファイルを作成 $ touch app/javascript/plugins/veevalidate.js 上記のファイルをインクルードします。 javascript/…

はじめに JWTを使ってトークンベースの認証機能をつくる方法について JWTをインストール gem 'jwt' bundle install sessionsコントローラの設定 controllers/api/sessions_controller.rb class Api::SessionsController < ApplicationController def create …

はじめに namespacedを使ってvuexをモジュール化する方法について 前提 現在、vuexストアの構成はapp/javascript/store/index.jsファイルがあるだけで、そこにタスク関連の状態管理を記述しています。 今後ユーザーなどの状態管理もするために、設定ファイル…

はじめに eslintを使ってvue.jsの構文チェックを自動化する方法について eslintの設定 まずは下記のコマンドでeslintをインストールします。 $ yarn add --dev eslint eslint-plugin-vue 続いてアプリケーションのルートディレクトリに.eslintrc.jsファイル…

はじめに v-slotを使って親コンポーネントから子コンポーネントにテンプレートを差し込む方法について 親コンポーネント <template> <div class="row"> <childComponent :tasks="todoTasks" taskListId="todo-list" @handleShowTaskDetailModal="handleShowTaskDetailModal"> <template v-slot:header> // v-slotで任意の名前を指定 <div class="h4">TODO</div> // この記述が差し込まれる </template></childcomponent></div></template>

はじめに 孫コンポーネントから親コンポーネントにデータを渡す方法について データを渡す方法 孫コンポーネントから親コンポーネントにデータを渡すには、孫コンポーネントと子コンポーネントで$emitメソッドを使う方法でもできますが、 子コンポーネントで…

はじめに vuexを使ってタスクの更新と削除機能を実装します。 親コンポーネントから詳細ページモーダルを呼び出して、 その詳細ページに編集ボタンと削除ボタンがあり、 編集ボタンを押すと、編集ページのモーダルが表示される。 タスク編集ページを作成 <template> <div :id="'task-edit-modal-' + task.id"> <div class="modal" @click.self="handleCloseModal"> <div class="modal-dialog"> <div class="modal-content"></div></div></div></div></template>…

はじめに 状態管理ライブラリのvuexを使ってデータを管理します。 vuexの設定 まずはvuexをインストールします。 $ yarn add vuex vuexの設定ファイルを作成します。 $ touch app/javascript/store/index.js import Vue from 'vue' import Vuex from 'vuex' …

はじめに タスクを追加するページのモーダルをコンポーネントとして作成します。 タスク追加ページを作成 $ touch app/javascript/pages/task/components/TaskCreateModal.vue <template> <transition name="fade"> <div id="task-create-modal"> <div class="modal" @click.self="handleCloseModal"> // モーダル以外の部分をクリックした時にモーダルを閉じる <div class="modal-dialog"> </div></div></div></transition></template>

はじめに タスクの詳細ページをモーダルで表示する。 前提 前提として下記のtaskテーブルがあります。 class Task < ApplicationRecord validates :title, presence: true validates :description, length: { maximum: 1000 } end create_table "tasks", for…

はじめに Vue.jsでRailsApiからjson形式のデータを取得する方法について。 前提 下記のようなtaskモデルがあります。 class CreateTasks < ActiveRecord::Migration[6.0] def change create_table :tasks do |t| t.string :title, null: false t.timestamps …

はじめに ヘッダーとフッターをコンポーネントとして分ける。 前提 下記のヘッダーとフッターの部分をコンポーネントとして分けます。 <template> <div class="d-flex flex-column min-vh-100"> <header class="mb-auto"> <nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand mb-0 h1">{{ title }}</span> </nav> </header> <div class="text-center"> <h3>タスクを管理しよう！</h3></div></div></template>

はじめに vue.jsでVueRouterを使ってルーティングを作成する。 yarnを使ってVueRouterをインストール $ yarn add vue-router VueRouterの初期設定 import Vue from "vue"; import Router from "vue-router"; import TopIndex from "../pages/top/index"; imp…