2021-01-13から1日間の記事一覧

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;…