Docker＋Rails＋Vue.jsを使ったDB操作可能なWEBアプリケーションの作成手順を実例で解説

# rails g model <モデル名> カラム名1:型 カラム名2:型,,,,,

# rails g model client pj_name:string client_name:string status:integer order_date:date price:bigint memo:text
Running via Spring preloader in process 303
      invoke  active_record
      create    db/migrate/20210719082013_create_clients.rb
      create    app/models/client.rb
      invoke    test_unit
      create      test/models/client_test.rb
      create      test/fixtures/clients.yml

class CreateClients < ActiveRecord::Migration[6.1]
  def change
    create_table :clients do |t|
      t.string :pj_name
      t.string :client_name
      t.integer :status
      t.date :order_date
      t.bigint :price
      t.text :memo

      t.timestamps
    end
  end
end

class CreateClients < ActiveRecord::Migration[6.1]
  def change
    create_table :clients do |t|
      t.string :pj_name, null: false, defualt: ""
      t.string :client_name, null:false, default: ""
      t.integer :status, null: false, default: 0
      t.date :order_date, null: false
      t.bigint :price, null:false, defualt:0
      t.text :memo, null: true

      t.timestamps
    end
  end
end

# rails db:migrate

# rails db:migrate
== 20210715105849 CreateClients: migrating ====================================
-- create_table(:clients)
   -> 0.1232s
== 20210715105849 CreateClients: migrated (0.1235s) ===========================

# rails db:create db:migrate

validates :<カラム名>, <ルール名>: <内容>

validates :<カラム名>, <ルール名1>: <内容1>, <ルール名2>: <内容2>, <ルール名3>: <内容3>,,,

validates :<カラム名1>,　:<カラム名2>,　:<カラム名3>, <ルール名>: <内容>

class Client < ApplicationRecord
end

class Client < ApplicationRecord

  enum status: { "契約前": 0, "進行中": 1, "完了": 2 }

  validates :pj_name, :client_name, exclusion: { in: [nil, ""] }, length: { in: 3..80 },  exclusion: { in: [nil, ""] }
  validates :client_name, :client_name, exclusion: { in: [nil, ""] }, length: { in: 3..80 },  exclusion: { in: [nil, ""] }
  validates :status, inclusion: { in: ["契約前", "進行中", "完了"] }, exclusion: { in: [nil, ""] }
  validates :price, numericality: { only_integer: true },  exclusion: { in: [nil, ""] }

end

gem 'activeadmin'

# bundle install

rails g active_admin:install --skip-users --use_webpacker

# rails g active_admin:install --skip-users --use_webpacker
Running via Spring preloader in process 491
      create  config/initializers/active_admin.rb
      create  app/admin
      create  app/admin/dashboard.rb
       route  ActiveAdmin.routes(self)
    generate  active_admin:webpacker
       rails  generate active_admin:webpacker
Running via Spring preloader in process 513
      create  app/javascript/packs/active_admin.js
      create  app/javascript/stylesheets/active_admin.scss
      create  app/javascript/packs/active_admin/print.scss
      create  config/webpack/plugins/jquery.js
      insert  config/webpack/environment.js
      insert  config/webpack/environment.js
         run  yarn add @activeadmin/activeadmin from "."
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > vue-loader@15.9.2" has unmet peer dependency "css-loader@*".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
└─ @activeadmin/activeadmin@2.9.0
info All dependencies
├─ @activeadmin/activeadmin@2.9.0
├─ jquery-ui@1.12.1
├─ jquery-ujs@1.2.3
└─ jquery@3.6.0
Done in 10.77s.
      create  db/migrate/20210716065845_create_active_admin_comments.rb

rails db:migraterails db:migrate

rails generate active_admin:resource <モデル名>

permit_params :カラム名1, ;カラム名2,,,,

# rails generate active_admin:resource Client
Running via Spring preloader in process 566
      create  app/admin/clients.rb

ActiveAdmin.register Client do

  permit_params :pj_name, :client_name, :status, :order_date, :price, :memo

end

$ docker stop <Railsコンテナ名> <DBコンテナ名>
$ docker-compose up -d && docker-compose exec web bin/webpack-dev-server

touch app/controllers/api_controller.rb

class ApiController < ActionController::API
end

mkdir -p app/controllers/api/pj1
touch app/controllers/api/pj1/clients_controller.rb

class Api::Pj1::ClientsController < ApiController
  before_action :set_client, only: [:show]

  #例外処理
  rescue_from Exception, with: :render_status_500
  rescue_from ActiveRecord::RecordNotFound, with: :render_status_404

  #一覧
  def index
    @clients = Client.all
    render json: @clients
  end

  #詳細
  def show
    render json: @client
  end

  private

    def set_client
      @client = Client.find(params[:id])
    end

    def render_status_404(exception)
      render json: { errors: [exception] }, status: 404
    end

    def render_status_500(exception)
      render json: { errors: [exception] }, status: 500
    end
end

before_action :メソッド名

rescue_from 例外名, with: :メソッド名

  private

　　（省略）

    def render_status_404(exception)
      render json: { errors: [exception] }, status: 404
    end

    def render_status_500(exception)
      render json: { errors: [exception] }, status: 500
    end

Rails.application.routes.draw do
  
  ActiveAdmin.routes(self)
  （省略）
  # APIコントローラへのルーティング
  namespace :api, {format: 'json'} do
    namespace :pj1 do
      resources :clients, only: [:index, :show]
    end
  end
end

# rails routes | grep api
                         api_pj1_clients GET    /api/pj1/clients(.:format)
                                       api/pj1/clients#index {:format=>/json/}
                          api_pj1_client GET    /api/pj1/clients/:id(.:format)
                                       api/pj1/clients#show {:format=>/json/}

resources :コントローラ名

namespace :<名前空間> do
  resources :<コントローラ名>
end
   

rails webpacker:install:vue

$ docker-compose run web rails webpacker:install:vue
省略
Webpacker now supports Vue.js 🎉

        modified:   config/webpack/environment.js
        modified:   config/webpacker.yml
        modified:   package.json
        modified:   yarn.lock

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        app/javascript/app.vue
        app/javascript/packs/hello_vue.js
        config/webpack/loaders/

"dependencies": {
　　(省略)
    "vue-loader": "15.9.2",
　　(省略)
  },

# yarn install

# docker-compose run <Railsのサービス名> yarn install

$ docker exec -it rails-vue-web bash
root@59229383d91c:/rails-vue# yarn install
yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > vue-loader@15.9.2" has unmet peer dependency "css-loader@*".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 21.29s.

    plugins: [
     (省略),
     ["@babel/plugin-proposal-private-methods", { "loose": true }]
    ].filter(Boolean)

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ],
      ["@babel/plugin-proposal-private-methods", { "loose": true }]
    ].filter(Boolean)
  }
}

$ mv app/javascript/packs/hello_vue.js app/javascript/packs/main.js

<%= javascript_pack_tag 'main' %>
<%= stylesheet_pack_tag 'main' %>

{
  "application.js": "/packs/js/application-e421b4aa3f716bebdab1.js",
  "application.js.map": "/packs/js/application-e421b4aa3f716bebdab1.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-e421b4aa3f716bebdab1.js"
      ],
      "js.map": [
        "/packs/js/application-e421b4aa3f716bebdab1.js.map"
      ]
    },
    "main": {
      "js": [
        "/packs/js/main-f10dedba5d1ccdc85afe.js"
      ],
      "js.map": [
        "/packs/js/main-f10dedba5d1ccdc85afe.js.map"
      ]
    }
  },
  "main.js": "/packs/js/main-f10dedba5d1ccdc85afe.js",
  "main.js.map": "/packs/js/main-f10dedba5d1ccdc85afe.js.map",
}

{
  "application.js": "/packs/js/application-e421b4aa3f716bebdab1.js",
  "application.js.map": "/packs/js/application-e421b4aa3f716bebdab1.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-e421b4aa3f716bebdab1.js"
      ],
      "js.map": [
        "/packs/js/application-e421b4aa3f716bebdab1.js.map"
      ]
    },
    "hello_vue": {
      "js": [
        "/packs/js/hello_vue-f10dedba5d1ccdc85afe.js"
      ],
      "js.map": [
        "/packs/js/hello_vue-f10dedba5d1ccdc85afe.js.map"
      ]
    }
  },
  "hello_vue.js": "/packs/js/hello_vue-f10dedba5d1ccdc85afe.js",
  "hello_vue.js.map": "/packs/js/hello_vue-f10dedba5d1ccdc85afe.js.map",
}

<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

#npmの場合
npm install axios

#yarnの場合
yarn add axios

#CDNの場合（headerにリンクを追加）
<script src="https://unpkg.com/axios/dist/axios.min.js"><script>

#yarn add axios

yarn add v1.22.5
[1/4] Resolving packages...
  ・
  ・
  ・
info All dependencies
└─ axios@0.21.1
Done in 177.29s.

<template>
  <div id="app">
    {{ clients }}
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data(){
    return{
      clients: []
    }
  },
  mounted(){
    axios
      .get('/api/pj1/clients')
      .then(response => (this.clients = response.data))
  }
}
</script>

<style scoped>
</style>

<template>
  <div id="app">
    {{ clients }}
  </div>
</template>

import エクスポート名 from モジュール

  data(){
    return{
      clients: []
    }
  },

  const app = new Vue({
    vuetify, //追加
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

    axios
      .メソッド('HTTPアクセスするパス')
      .then(変数名 => (処理))

    axios
      .get('/api/pj1/clients')
      .then(response => (this.clients = response.data))

|- javascript
|     |
|     |- packs
|     |    |- main.js
|     |
|     |- app.vue
|     |
|     |- components
|          |- Top.vue
|          |
|          |- clients
|                |- Clients.vue
|                |- Client.vue

yarn add vue-router

npm install vue-router

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'
import Client from './components/clients/Client'
import Clients from './components/clients/Clients'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Top,
      name: 'top',
    },
    {
      path: '/clients',
      component: Clients,
      name: 'clients',
    },
    {
      path: '/clients/:id(\\d+)',
      component: Client,
      name: 'client',
    }
  ]
})

export default {
  router
}
</script>

<style lang="scss" scoped>
</style>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Top,
      name: 'top',
    },
    {
      path: '/clients',
      component: Clients,
      name: 'clients',
    },
    {
      path: '/clients/:id(\\d+)',
      component: Client,
      name: 'client',
    }
  ]
})

<template>
  <div>
      <ul>
          <router-link to="/clients" tag="li">クライアント一覧</router-link>
      </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

<template>
  <div>
    <table>
      <tbody>
        <tr>
          <th>Project Name</th>
          <th>Client Nmae</th>
          <th>Status</th>
        </tr>
        <tr v-for="(client, index) in clients" :key="index">
          <td>{{ client.client_name }}</td>
          <td>{{ client.pj_name }}</td>
          <td>{{ client.status }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data(){
    return{
      clients: []
    }
  },
  mounted(){
    axios
      .get('/api/pj1/clients')
      .then(response => (this.clients = response.data))
  }
}
</script>

<style scoped>
</style>

<開始タグ v-for="(変数名, インデックス用変数名) in ループさせるデータ" :key="固有となる変数">

<開始タグ v-for="変数名 in ループさせるデータ" :key="変数名.id">

  def index
    @clients = Client.select(:client_name, :pj_name, :status, :id)
    render json: @clients
  end

<template>
  <div>
      <dl>
          <dt>client_id</dt>
          <dd>{{ client.id }}</dd>
          <dt>client_name</dt>
          <dd>{{ client.client_name }}</dd>
          <dt>pj_name</dt>
          <dd>{{ client.pj_name }}</dd>
          <dt>status</dt>
          <dd>{{ client.status }}</dd>
          <dt>price</dt>
          <dd>{{ client.price }}</dd>
          <dt>order_date</dt>
          <dd>{{ client.order_date }}</dd>
          <dt>memo</dt>
          <dd>{{ client.memo }}</dd>
      </dl>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data(){
    return{
      client: []
    }
  },
  mounted(){
    axios
      .get(`/api/pj1/clients/${this.$route.params.id}.json`)
      .then(response => (this.client = response.data))
  }
}
</script>



<style lang="scss" scoped>
dl {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  dt {
    width: 30%;
    border: 1px solid gray;
    padding: 10px;
  }
  dd {
    width: 50%;
    border: 1px solid gray;
    padding: 10px;
  }
}
</style>

    axios
      .get(`/api/pj1/clients/${this.$route.params.id}.json`)
      .then(response => (this.client = response.data))

<router-link :to="{ name: 'client', params: { id: client.id }}">
  {{ client.id }}
</router-link>

<template>
  <div>
    <table>
      <tbody>
        <tr>
          <th>Project Name</th>
          <th>Client Nmae</th>
          <th>Status</th>
          <th>Details Link</th>
        </tr>
        <tr v-for="(client, index) in clients" :key="index">
          <td>{{ client.client_name }}</td>
          <td>{{ client.pj_name }}</td>
          <td>{{ client.status }}</td>
          <td><router-link :to="{ name: 'client', params: { id: client.id }}">{{ client.id }}</router-link></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data(){
    return{
      clients: []
    }
  },
  mounted(){
    axios
      .get('/api/pj1/clients')
      .then(response => (this.clients = response.data))
  }
}
</script>

<style lang="scss" scoped>
table{
  text-align: center;
  th{
    padding: 10px;
    color: #FF9800;
    background: #fff5e5;
  }
  td{
    padding: 10px;
    border: 1px solid lightgray;
  }
}
</style>

Rails.application.routes.draw do
  
  ActiveAdmin.routes(self)
  （省略）
  # APIコントローラへのルーティング
  namespace :api, {format: 'json'} do
    namespace :pj1 do
      resources :clients, only: [:index, :show, :create]
    end
  end
end

#rails routes
Prefix          Verb    URI                         Pattern Controller#Action
api_pj1_clients POST   /api/pj1/clients(.:format)　 api/pj1/clients#create {:format=>/json/}

  #新規登録
  def create
    @client = Client.new(client_params)
    if @client.save
      render json: @client, status: :created
    else
      render json: { errors: @client.errors.full_messages }, status: :unprocessable_entity
    end
  end

  private

　  (省略)    

    #ストロングパラメータの設定
    def client_params
      params.fetch(:client, {}).permit(:client_name, :pj_name, :status, :order_date, :price, :memo)
    end

class Api::Pj1::ClientsController < ApiController
  before_action :set_client, only: [:show]

  #例外処理
  rescue_from Exception, with: :render_status_500
  rescue_from ActiveRecord::RecordNotFound, with: :render_status_404


  #一覧
  def index
    # @clients = Client.all
    @clients = Client.select(:client_name, :pj_name, :status, :id)
    render json: @clients
  end

  #詳細
  def show
    render json: @client
  end

  #新規登録
  def create
    @client = Client.new(client_params)
    if @client.save
      render json: @client, status: :created
    else
      render json: { errors: @client.errors.full_messages }, status: :unprocessable_entity
    end
  end

  private

    def set_client
      @client = Client.find(params[:id])
    end

    #ストロングパラメータの設定
    def client_params
      params.fetch(:client, {}).permit(:client_name, :pj_name, :status, :order_date, :price, :memo)
    end

    def render_status_404(exception)
      render json: { errors: [exception] }, status: 404
    end

    def render_status_500(exception)
      render json: { errors: [exception] }, status: 500
    end
end

|- javascript
|     |
|     |- packs
|     |    |- main.js
|     |
|     |- app.vue
|     |
|     |- components
|          |- Top.vue
|          |
|          |- clients
|                |- Clients.vue
|                |- Client.vue
|                |- ClientNew.vue

<template>
  <form @submit.prevent="createClient">
    <div class="error-wrapper" v-if="errors.length != 0">
      <ul v-for="error in errors" :key="error">
        <li><font color="red">{{ error }}</font></li>
      </ul>
    </div>
    <div>
      <label>client_name</label>
      <input v-model="client.client_name" type="text">
    </div>
    <div>
      <label>pj_name</label>
      <input v-model="client.pj_name" type="text">
    </div>
    <div>
      <label>status</label>
      <select v-model="client.status">
        <option>契約前</option>
        <option>進行中</option>
        <option>完了</option>
      </select>
    </div>
    <div>
      <label>order_date</label>
      <input v-model="client.order_date" type="date">
    </div>
    <div>
      <label>price</label>
      <input v-model="client.price" type="number" min="0">
    </div>
    <div>
      <label>memo</label>
      <textarea v-model="client.memo"></textarea>
    </div>
    <button type="submit">送信</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  data(){
    return {
      client: {
        client_name: '',
        pj_name: '',
        status: '',
        order_date: '',
        price: '',
        memo: '',
      },
      errors: ''
    }
  },
  methods: {
    createClient(){
      console.log(this.client)
      axios
        .post('/api/pj1/clients', this.client)
        .then(response => {
          let res = response.data;
          this.$router.push({ name: 'client', params: { id: res.id } });
        })
        .catch(error => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
    }
  }
}
</script>

<style lang="scss" scoped>
div:not(.error-wrapper){
  display: flex;
}
label{
  width: 15%;
}
input, select, textarea{
  margin: 3px;
  width: 30%;
  border: 1px solid gray;
}
button{
  margin: 10px;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
  &:active{
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
  }
}
</style>

    <div class="error-wrapper" v-if="errors.length != 0">
      <ul v-for="error in errors" :key="error">
        <li><font color="red">{{ error }}</font></li>
      </ul>
    </div>

      axios
        .post('/api/pj1/clients', this.client)
        （省略）
        .catch(error => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }

    <div>
      <label>表示するラベル名</label>
      <input v-model="変数" type="タイプ">
    </div>

    createClient(){
      console.log(this.client)
      axios
        .post('/api/pj1/clients', this.client)
        .then(response => {
          let res = response.data;
          this.$router.push({ name: 'client', params: { id: res.id } });
        })

      client: {
        client_name: '',
        pj_name: '',
        status: '',
        order_date: '',
        price: '',
        memo: '',
      },

    {
      path: '/clients/new',
      component: ClientNew,
      name: 'clientNew'
    }

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'
import Client from './components/clients/Client'
import Clients from './components/clients/Clients'
import ClientNew from './components/clients/ClientNew'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Top,
      name: 'top',
    },
    {
      path: '/clients',
      component: Clients,
      name: 'clients',
    },
    {
      path: '/clients/:id(\\d+)',
      component: Client,
      name: 'client',
    },
    {
      path: '/clients/new',
      component: ClientNew,
      name: 'clientNew'
    }
  ]
})

export default {
  router
}
</script>

<style lang="scss" scoped>
</style>

|- javascript
|     |
|     |- packs
|     |    |- main.js
|     |
|     |- app.vue
|     |
|     |- components
|          |- Top.vue
|          |
|          |- clients
|                |- Clients.vue
|                |- Client.vue
|                |- ClientNew.vue
|                |- ClientForm.vue

<template>
  <form @submit.prevent="$emit('submit')">
    <div class="error-wrapper" v-if="errors.length != 0">
      <ul v-for="error in errors" :key="error">
        <li><font color="red">{{ error }}</font></li>
      </ul>
    </div>
    <div>
      <label>client_name</label>
      <input v-model="client.client_name" type="text">
    </div>
    <div>
      <label>pj_name</label>
      <input v-model="client.pj_name" type="text">
    </div>
    <div>
      <label>status</label>
      <select v-model="client.status">
        <option>契約前</option>
        <option>進行中</option>
        <option>完了</option>
      </select>
    </div>
    <div>
      <label>order_date</label>
      <input v-model="client.order_date" type="date">
    </div>
    <div>
      <label>price</label>
      <input v-model="client.price" type="number" min="0">
    </div>
    <div>
      <label>memo</label>
      <textarea v-model="client.memo"></textarea>
    </div>
    <button type="submit">送信</button>
  </form>
</template>

<script>
export default {
  props:{
    client: {},
    errors: "",
  }

}
</script>

<style lang="scss" scoped>
div:not(.error-wrapper){
  display: flex;
}
label{
  width: 15%;
}
input, select, textarea{
  margin: 3px;
  width: 30%;
  border: 1px solid gray;
}
button{
  margin: 10px;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
  &:active{
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
  }
}
</style>

$emit('イベント名', 引数,,,)

v-on:イベント名="メソッド名"

or

@イベント名="メソッド名"

<テンプレート名 :渡すデータ名1='変数名1' :渡すデータ名2='変数名2',,,  />

<template>
  <ClientForm :errors='errors' :client="client" @submit="createClient" />
</template>

<script>
import ClientForm from './ClientForm.vue'
import axios from 'axios'

export default {
  components:{
    ClientForm: ClientForm,
  },
  data(){
    return {
      client: {
        client_name: '',
        pj_name: '',
        status: '',
        order_date: '',
        price: '',
        memo: '',
      },
      errors: ''
    }
  },
  methods: {
    createClient(){
      console.log(this.client)
      axios
        .post('/api/pj1/clients', this.client)
        .then(response => {
          let res = response.data;
          this.$router.push({ name: 'client', params: { id: res.id } });
        })
        .catch(error => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

<script>
import ClientForm from './ClientForm.vue'

export default {
  components:{
    ClientForm: ClientForm,
  },
｝

 <ClientForm />

<ClientForm :errors='errors' :client="client" />

<ClientForm :errors='errors' :client="client" @submit="createClient" />

Rails.application.routes.draw do
  
  ActiveAdmin.routes(self)
  （省略）
  # APIコントローラへのルーティング
  namespace :api, {format: 'json'} do
    namespace :pj1 do
      resources :clients, only: [:index, :show, :create, :update]
    end
  end
end

#rails routes
Prefix          Verb    URI                            Pattern Controller#Action
api_pj1_clients PATCH  /api/pj1/clients/:id(.:format)  api/pj1/clients#update {:format=>/json/}
                PUT    /api/pj1/clients/:id(.:format)  api/pj1/clients#update {:format=>/json/}

before_action :set_client, only: [:show, :update]

  #編集
  def update
    if @client.updat(client_params)
      head :no_content
    else
      render json: { errors: @client.errors.full_messages }, status: :unprocessable_entity
    end
  end

class Api::Pj1::ClientsController < ApiController
  before_action :set_client, only: [:show, :update]

  #例外処理
  rescue_from Exception, with: :render_status_500
  rescue_from ActiveRecord::RecordNotFound, with: :render_status_404


  #一覧
  def index
    # @clients = Client.all
    @clients = Client.select(:client_name, :pj_name, :status, :id)
    render json: @clients
  end

  #詳細
  def show
    render json: @client
  end

  #新規登録
  def create
    @client = Client.new(client_params)
    if @client.save
      render json: @client, status: :created
    else
      render json: { errors: @client.errors.full_messages }, status: :unprocessable_entity
    end
  end

  #編集
  def update
    if @client.update(client_params)
      head :no_content
    else
      render json: { errors: @client.errors.full_messages }, status: :unprocessable_entity
    end
  end

  private

    def set_client
      @client = Client.find(params[:id])
    end

    #ストロングパラメータの設定
    def client_params
      params.fetch(:client, {}).permit(:client_name, :pj_name, :status, :order_date, :price, :memo)
    end

    def render_status_404(exception)
      render json: { errors: [exception] }, status: 404
    end

    def render_status_500(exception)
      render json: { errors: [exception] }, status: 500
    end
end

|- javascript
|     |
|     |- packs
|     |    |- main.js
|     |
|     |- app.vue
|     |
|     |- components
|          |- Top.vue
|          |
|          |- clients
|                |- Clients.vue
|                |- Client.vue
|                |- ClientNew.vue
|                |- ClientForm.vue
|                |- ClientEdit.vue

<template>
<div>
  {{client}}
  <ClientForm :errors="errors" :client="client" @submit="updateClient" />
</div>
</template>

<script>
import ClientForm from './ClientForm.vue';
import axios from 'axios';

export default {
  components: {
    ClientForm
  },
  data(){
    return {
      client: {},
      errors: ''
    }
  },
  mounted(){
    axios
      .get(`/api/pj1/clients/${this.$route.params.id}.json`)
      .then(response => (this.client = response.data))
  },
  methods: {
    updateClient(){
      axios
        .patch(`/api/pj1/clients/${this.client.id}`, {client: this.client})
        .then(response => {
          this.$router.push({ name: 'clients' });
        })
        .catch(error => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

    axios
      .get(`/api/pj1/clients/${this.$route.params.id}.json`)
      .then(response => (this.client = response.data))

axios.patch( 'URL', オブジェクト )

      axios
        .patch(`/api/pj1/clients/${this.client.id}`, {client: this.client})
        .then(response => {
          this.$router.push({ name: 'clients' });

    {
      path: '/clients/edit/:id(\\d+)',
      component: ClientEdit,
      name: 'clientEdit',
    }

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'
import Client from './components/clients/Client'
import Clients from './components/clients/Clients'
import ClientNew from './components/clients/ClientNew'
import ClientEdit from './components/clients/ClientEdit'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Top,
      name: 'top',
    },
    {
      path: '/clients',
      component: Clients,
      name: 'clients',
    },
    {
      path: '/clients/:id(\\d+)',
      component: Client,
      name: 'client',
    },
    {
      path: '/clients/new',
      component: ClientNew,
      name: 'clientNew'
    },
    {
      path: '/clients/edit/:id(\\d+)',
      component: ClientEdit,
      name: 'clientEdit',
    },
  ]
})

export default {
  router
}
</script>

<style lang="scss" scoped>
</style>

Rails.application.routes.draw do
  
  ActiveAdmin.routes(self)
  （省略）
  # APIコントローラへのルーティング
  namespace :api, {format: 'json'} do
    namespace :pj1 do
      resources :clients, only: [:index, :show, :create, :update, :destroy]
    end
  end
end

#rails routes
Prefix          Verb    URI                            Pattern Controller#Action
api_pj1_clients DELETE /api/pj1/clients/:id(.:format)  api/pj1/clients#destroy {:format=>/json/}

before_action :set_client, only: [:show, :update, :destroy]

  #削除
  def destroy
    @client.destroy
    head :no_content
  end

class Api::Pj1::ClientsController < ApiController
  before_action :set_client, only: [:show, :update, :destroy]

  #例外処理
  rescue_from Exception, with: :render_status_500
  rescue_from ActiveRecord::RecordNotFound, with: :render_status_404


  #一覧
  def index
    # @clients = Client.all
    @clients = Client.select(:client_name, :pj_name, :status, :id)
    render json: @clients
  end

  #詳細
  def show
    render json: @client
  end

  #新規登録
  def create
    @client = Client.new(client_params)
    if @client.save
      render json: @client, status: :created
    else
      render json: { errors: @client.errors.full_messages }, status: :unprocessable_entity
    end
  end

  #編集
  def update
    if @client.update(client_params)
      head :no_content
    else
      render json: { errors: @client.errors.full_messages }, status: :unprocessable_entity
    end
  end

  #削除
  def destroy
    @client.destroy
    head :no_content
  end

  private

    def set_client
      @client = Client.find(params[:id])
    end

    #ストロングパラメータの設定
    def client_params
      params.fetch(:client, {}).permit(:client_name, :pj_name, :status, :order_date, :price, :memo)
    end

    def render_status_404(exception)
      render json: { errors: [exception] }, status: 404
    end

    def render_status_500(exception)
      render json: { errors: [exception] }, status: 500
    end
end

|- javascript
|     |
|     |- packs
|     |    |- main.js
|     |
|     |- app.vue
|     |
|     |- components
|          |- Top.vue
|          |- Modal.vue
|          |
|          |- clients
|                |- Clients.vue
|                |- Client.vue
|                |- ClientNew.vue
|                |- ClientForm.vue
|                |- ClientEdit.vue

<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-body">
            <slot name="body">
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              <button class="modal-default-button" @click="$emit('ok')">
                削除
              </button>
              <button class="modal-default-button" @click="$emit('cancel')">
                キャンセル
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
}
</script>


<style lang="scss" scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 300px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-footer{
  text-align: right;
}

.modal-default-button{
  margin-left: 5px;
  border: 1px solid gray;
  padding: 2px 10px;
  border-radius: 5px;
}

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>

<slot name="スロット名">デフォルトのテキスト</slot>

<タグ slot="スロット名">内容</タグ>

<template>
  <div>
    <table>
      <tbody>
        <tr>
          <th>Project Name</th>
          <th>Client Nmae</th>
          <th>Status</th>
          <th>Details Link</th>
          <th>Delete</th>
        </tr>
        <tr v-for="(client, index) in clients" :key="index">
          <td>{{ client.client_name }}</td>
          <td>{{ client.pj_name }}</td>
          <td>{{ client.status }}</td>
          <td><router-link :to="{ name: 'client', params: { id: client.id }}">{{ client.id }}</router-link></td>
          <td>
            <button @click="deleteTarget = client.id; showModal = true">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <Modal v-if="showModal" @cancel="showModal = false" @ok="deleteClient(); showModal = false;">
      <div slot="body">本当に削除しますか？</div>
    </Modal>
  </div>
</template>

<script>
import Modal from '../Modal.vue'
import axios from 'axios';

export default {
  components:{
    Modal
  },
  data(){
    return{
      clients: [],
      showModal: false,
      deleteTarget: -1,
      errors: '',
    }
  },
  mounted(){
    this.getClients();
  },
  methods:{
    getClients(){
      axios
      .get('/api/pj1/clients')
      .then(response => (this.clients = response.data))
    },
    deleteClient(){
      if (this.deleteTarget <= 0) {
        console.warn('deleteTarget should be grater than zero.');
        return;
      }

      axios
        .delete(`/api/pj1/clients/${this.deleteTarget}`)
        .then(response => {
          this.deleteTarget = -1;
          this.getClients();
        })
        .catch(error => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
    }
  }
}
</script>

<style lang="scss" scoped>
table{
  text-align: center;
  th{
    padding: 10px;
    color: #FF9800;
    background: #fff5e5;
  }
  td{
    padding: 10px;
    border: 1px solid lightgray;
  }
}
</style>

import Modal from '../Modal.vue'

export default {
  components:{
    Modal
  },
  (省略)
}

    <Modal v-if="showModal" @cancel="showModal = false" @ok="deleteClient(); showModal = false;">
      <div slot="body">本当に削除しますか？</div>
    </Modal>

<th>Delete</th>

(省略)

<td></td>

 <button @click="deleteTarget = client.id; showModal = true">Delete</button>

    deleteClient(){
      if (this.deleteTarget <= 0) {
        console.warn('deleteTarget should be grater than zero.');
        return;
      }

      axios
        .delete(`/api/pj1/clients/${this.deleteTarget}`)
        .then(response => {
          this.deleteTarget = -1;
          this.getClients();
        })
        .catch(error => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
    }