Vue

vue-mqでレスポンシブ対応

Vue

vue-mqをインストール $ yarn add vue-mq vue-mqをインポートしてブレイクポイントを設定 // hello_vue.js import VueMq from 'vue-mq' Vue.use(VueMq, { breakpoints: { sm: 600, md: 900, lg: Infinity }, defaultBreakpoint: 'lg' }); テンプレートで使う <template></template>…

v-ifで空配列時に表示を変える

Vue

<div v-if="article.length"> <p>記事は空ではありません</p> </div> <div v-else> <p>記事は空です</p> </div> 参考記事: 【Vue.js入門】v-ifを活用して空配列時にToDoアプリに「Todoはありません」と表示しよう! - Qiita

vuex-persistedstateでリロードしてもvuexのステートデータを保持

Vue

vuex-persitedstateをインストール $ vuex-persistedstate storeファイルにインポートして設定を記載 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' import articles from './modules/articles' i…

vue-routerで遷移時にデータを渡す

Vue

router { path: '/article', component: ArticleShow, name: 'ArticleShow', props: true } 遷移元 <script> export default { props: { article: { type: Object, required: true } }, methods :{ showArticleDetail() { this.$router.push({ name: 'ArticleShow', </script>…

リアルタイム検索フォーム

Vue

<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> <input id="search" // 入力された値をdataに取得。 v-model="searchTask" type="text" placeholder="タスク名を入力してください" class="form-control" > </div> </div>…</div></template>

ActiveStorageで画像アップロード

Vue

プロフィールページを作成し、ユーザーの名前の変更とプロフィール画像のアップロードをできるようにする。 ①ActiveStorageをインストール。 $ bundle exec rails active_storage:install $ bundle exec rails db:migrate ②ActiveStorage用のカラムをモデル…

VeeValidateでバリデーション

Vue

①vee-validateをインストール。 $ yarn add vee-validate ②pluginsディレクトリ配下にファイルを作成してインスタンスに登録する。 $ touch app/javascript/plugins/veevalidate.js javascript/packs/hello_vue.js import '../plugins/veevalidate' ③veevali…

JWTを用いてトークンベースの認証を実装

Vue

前回:ユーザー登録機能の実装 - Rails技術ブログ ①ruby-jwtをインストール。 gem 'jwt' $ bundle install ②ルーティングを設定。 Rails.application.routes.draw do root to: 'home#index' namespace :api, format: 'json' do resources :tasks resources :…

ユーザー登録機能の実装

Vue

①sorceryをインストール。 gem 'sorcery' $ bundle exec rails g sorcery:install class SorceryCore < ActiveRecord::Migration[6.0] def change create_table :users do |t| t.string :name, null: false t.string :email, null: false t.string :crypted_…

eslintで構文チェック

Vue

eslintをインストール $ yarn add --dev eslint eslint-plugin-vue プロジェクトのルートディレクトリに.eslintrc.jsを作成して、以下の設定を追記。 module.exports = { "extends": [ "plugin:vue/recommended", ] }; eslintのコマンドをpackage.jsonに登録…

vuexをnamespacedでモジュールに分割

Vue

store/index.js import Vue from 'vue' import Vuex from 'vuex' import tasks from './modules/tasks' import users from './modules/users' Vue.use(Vuex) export default new Vuex.Store({ modules: { tasks, users } }) modules/tasks.js import axios f…

slotで親コンポーネントから子コンポーネントにテンプレートを差し込む

Vue

親コンポーネント <template> <TaskList> <template v-slot:header> <div class="h4">TODO</div> </template> </TaskList> <TaskList> <template v-slot:header> <div class="h4">DOING</div> </template> </TaskList> <TaskList> <template v-slot:header> <div class="h4">DONE</div> </template> </TaskList> </template>

孫コンポーネントから親コンポーネントにデータを渡す

Vue

孫コンポーネント(javascript/pages/task/components/taskItem.vue) <template> <div @click="grandChildMethod(task)"> <button>ボタン</button> </div> </template> <script> export default { name: 'TaskItem', data () { return { task: 'Hello' } }, methods: { grandChildMethod(task) { this.$emit('child', task) } } }

Vueのフォームでセレクトボックスを使う

Vue

<template> <div class="form-group mb-3"> <label for="status">ステータス</label> <select class="form-control" id="status" v-model="task.status"> <option value="todo">TODO</option> <option value="doing">DOING</option> <option value="done">DONE</option> </select> </div> </template> <script> export default {…

vuexとaxiosでタスクを削除。

Vue

前回:vuexとaxiosでタスクを更新 - Rails技術ブログ ①タスク詳細モーダルに削除ボタンと親コンポーネントにデータを渡すメソッドを記載。 詳細モーダル <template> <div :id="'task-detail-modal-' + task.id"> <div class="modal" @click.self="handleCloseModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">{{ task…</h5></div></div></div></div></div></template>

vuexとaxiosでタスクを更新

Vue

前回:vuexとaxiosでタスクを追加 - Rails技術ブログ ①タスク編集モーダルを作成・記載して親コンポーネントから読み込む。 編集モーダル <template> <div :id="'task-edit-modal-' + task.id"> <div class="modal" @click.self="handleCloseModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="from-group mb-3"> </div></div></div></div></div></div></template>

vuexとaxiosでタスクを追加

Vue

前回:vuexとaxiosでタスク一覧を取得 - Rails技術ブログ ①storeにタスク追加処理を記載。 store/index.js import Vue from 'vue' import Vuex from 'vuex' import axios from '../plugins/axios' Vue.use(Vuex) export default new Vuex.Store({ state: { t…

タスク追加モーダルの実装

Vue

前回:タスク詳細モーダルの実装 - Rails技術ブログ ①モーダルのコンポーネントを作成して表示非表示を切り替えられるようにする(前回参照)。 $ touch app/javascript/pages/task/components/TaskCreateModal.vue 親コンポーネント <template> <div> <div class="d-flex"> <div class="col-4 bg-light rounded shadow m-3 p-3"> <div class="h4">TODO</div> </div></div></div></template>

タスク詳細モーダルの実装

Vue

前回:APIでデータを取得してVueで呼び出す - Rails技術ブログ ①モーダルのコンポーネントを作成。 $ touch app/javascript/pages/task/components/TaskDetailModal.vue bootstrapを活用してデザインを記載。 <template> <transition name="fade"> <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> </div></div></div></div></transition></template>

APIでデータを取得してVueで呼び出す

Vue

前回:ヘッダー・フッターをコンポーネントに分割 - Rails技術ブログ ①モデルを作成。 $ bundle exec rails g model Task title:string class CreateTasks < ActiveRecord::Migration[6.0] def change create_table :tasks do |t| t.string :title, null: fa…

ヘッダー・フッターをコンポーネントに分割

Vue

前回:Vue Routerで画面遷移 - Rails技術ブログ ①ヘッダーとフッター用のファイルを作成・記載。 $ touch app/javascript/components/TheHeader.vue $ touch app/javascript/components/TheFooter.vue TheHeader.vue <template> <header> <nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand mb-0 h1">タスク管理アプリ</span> </nav> </header> </template>

Vue Routerで画面遷移

Vue

前回:Vue.js初期設定/Bootstrapの導入 - Rails技術ブログ ①yarnでvue-routerをインストール。 $ yarn add vue-router ②全てのルーティングを一箇所に集約。 Rails.application.routes.draw do root to: 'home#index' get '*path', to: 'home#index' end ③ro…

Vue.js初期設定/Bootstrapの導入

Vue

環境 ・Rails: 6.0.2.1 ・Ruby: 2.6.5 ・Vue.js: 2.6.11 ・Node.js: v14.15.0 ・Yarn: 1.22.10 ①homeコントローラを作成し、indexアクションを設定。 $ bundle exec rails g controller Home index class HomeController < ApplicationController def index;…