はじめに

javascriptとVue.jsを勉強する上で有力な教材をまとめました。
GeekSalonの教材以外でも、とてもためになるqiitaの記事やサイトがありますのでどんどん活用しましょう！
ゼミの課題をやり終えてもっと勉強したい人や、基礎的なところから勉強しなおしたい人は、
是非自分の求める教材を探してみてください！
また、後半にはfirebaseの教材のリンクもまとめているので興味のある方は読んでみてください。

javascriptを学ぶ

• プロゲート : 基礎, 復習
  プロゲートとは、初心者向けのプログラミング学習サービスです。
  ブラウザ上でコードを書いて結果の確認までできるため自分のPC内で環境構築などの準備をしなくてもいい点が魅力です。
  エキスパートコースの教材でもjavascriptの基礎を学ぶことはできますが、プロゲートではとてもわかりやすく丁寧に教えてくれる教材が揃っています。なので、ゼミや教材を読んで少し難しく感じた人にオススメです。復習したい人も是非プロゲートを使ってみてください！

Vue.jsを学ぶ

• 公式ドキュメント : 基礎
  Vue.jsの公式ドキュメントは日本語翻訳もされていて内容も充実しているので、
  ゼミでも扱うくらいとてもわかりやすいです。 はじめは少し難しく感じてしまう単語があるかもしれませんが、 公式と言うこともあってとても信憑性もあり、Vue.jsを理解するには十分の教材です。
• Vue-cli : 基礎
  Vue.jsのインストールから、一通りの機能について載っています。
  Vue-cliを簡単に説明すると、Vue.jsの開発を手早く進めるためのシステムです。
  具体的なVue-cliの使い方としてコマンドプロンプト上で以下のコマンドが打てるようになります！とても便利です！
  
  • vue --version: Vue.jsのバージョンを確認できます。
  • vue create appName: 新しいプロダクトのひな型を作れます。(rails new appみたいに)
  • vue serve: プロダクトのサンプルをローカル環境で確かめることができます。

Firebaseとは

Firebaseには、アプリ開発を助けてくれる機能が備わっています。
主要なサービスを下にいくつかまとめてみました。

• 認証（Firebase Authentication）
  ユーザーのアカウント登録やログインを簡単に実装することができる機能です。 またSNS認証では、Google、Facebook、Twitter、GitHubのアカウントが利用できます。
  Firebase Authentication公式ドキュメント
• リアルタイムデータベース（Firebase Realtime Database）
  Firebaseが提供するデータベースです。データベースでは、データを保存したり管理したり簡単に編集して使うことができる機能です。
  Firebase Realtime Database公式ドキュメント
• ホスティング（Firebase Hosting）
  作ったプロダクトをデプロイすることができます。 ちなみにデプロイとは、簡単に言うとプロダクトを公開(リリース)するという意味です。
  Firebase Hosting公式ドキュメント

その他にもアプリケーションを作る上で便利なサービスがあるので、
是非興味があれば調べてみてください！

Vue.js + Firebaseを学ぶ

• Firebaseのセットアップとホスティング : 基礎
  このサイトでは、Firebaseの大まかな使い方とホスティングの機能について学べます。
  Firebaseのホスティング機能を使い、アプリケーションをデプロイ(公開)する行程を知ることで、Firebaseに慣れることと、ある程度Firebaseとはどうゆうものなの理解することができます。
• Firebase Authentication ユーザー認証 : 基礎
  FirebaseのAuthentication機能を使って簡単にユーザーアカウントを作ったりログインしたりすることができます。 この記事は、とても丁寧に説明してくれてます。
• Firebaseでchatを作ってみた : 応用編
  この記事では、Vue.jsとfirebaseを使ってチャットアプリを作るまでを紹介しています。
• ToDoリストを作る : 応用編
  

はじめに

javascriptとVue.jsを勉強する上で有力な教材をまとめました。
GeekSalonの教材以外でも、とてもためになるqiitaの記事やサイトがありますのでどんどん活用しましょう！
ゼミの課題をやり終えてもっと勉強したい人や、基礎的なところから勉強しなおしたい人は、
是非自分の求める教材を探してみてください！
また、後半にはfirebaseの教材のリンクもまとめているので興味のある方は読んでみてください。

javascriptを学ぶ

• プロゲート : 基礎, 復習
  プロゲートとは、初心者向けのプログラミング学習サービスです。
  ブラウザ上でコードを書いて結果の確認までできるため自分のPC内で環境構築などの準備をしなくてもいい点が魅力です。
  エキスパートコースの教材でもjavascriptの基礎を学ぶことはできますが、プロゲートではとてもわかりやすく丁寧に教えてくれる教材が揃っています。なので、ゼミや教材を読んで少し難しく感じた人にオススメです。復習したい人も是非プロゲートを使ってみてください！

Vue.jsを学ぶ

• 公式ドキュメント : 基礎
  Vue.jsの公式ドキュメントは日本語翻訳もされていて内容も充実しているので、
  ゼミでも扱うくらいとてもわかりやすいです。 はじめは少し難しく感じてしまう単語があるかもしれませんが、 公式と言うこともあってとても信憑性もあり、Vue.jsを理解するには十分の教材です。
• Vue-cli : 基礎
  Vue.jsのインストールから、一通りの機能について載っています。
  Vue-cliを簡単に説明すると、Vue.jsの開発を手早く進めるためのシステムです。
  具体的なVue-cliの使い方としてコマンドプロンプト上で以下のコマンドが打てるようになります！とても便利です！
  
  • vue --version: Vue.jsのバージョンを確認できます。
  • vue create appName: 新しいプロダクトのひな型を作れます。(rails new appみたいに)
  • vue serve: プロダクトのサンプルをローカル環境で確かめることができます。

Firebaseとは

Firebaseには、アプリ開発を助けてくれる機能が備わっています。
主要な機能を下にいくつかまとめてみました。

• 認証（Firebase Authentication）
  ユーザーのアカウント登録やログインを簡単に実装することができる機能です。 またSNS認証では、Google、Facebook、Twitter、GitHubのアカウントが利用できます。
  Firebase Authentication公式ドキュメント
• リアルタイムデータベース（Firebase Realtime Database）
  Firebaseが提供するデータベースです。データベースでは、データを保存したり管理したり簡単に編集して使うことができる機能です。
  Firebase Realtime Database公式ドキュメント
• ホスティング（Firebase Hosting）
  作ったプロダクトをデプロイすることができます。 ちなみにデプロイとは、簡単に言うとプロダクトを公開(リリース)するという意味です。
  Firebase Hosting公式ドキュメント

その他にもアプリケーションを作る上で便利なサービスがあるので、
是非興味があれば調べてみてください！

Vue.js + Firebaseを学ぶ

• Firebaseのセットアップとホスティング : 基礎
  このサイトでは、Firebaseの大まかな使い方とホスティングの機能について学べます。
  Firebaseのホスティング機能を使い、アプリケーションをデプロイ(公開)する行程を知ることで、Firebaseに慣れることと、ある程度Firebaseとはどうゆうものなの理解することができます。
• Firebase Authentication ユーザー認証 : 基礎
  FirebaseのAuthentication機能を使って簡単にユーザーアカウントを作ったりログインしたりすることができます。 この記事は、とても丁寧に説明してくれてます。
• Vue.js + Firebaseでchatを作る : 応用編
  この記事では、Vue.jsとfirebaseを使ってチャットアプリを作るまでを紹介しています。

タイトルのまんまです。 require.context を利用して、或るディレクトリ配下にあるコンポーネントファイル(.vue）をまるっとrequireしたい。

エントリーファイル（main.js）に次のように記述します。

function requireAll (context) {
  const components = {}
  context.keys().forEach((_path) => {
    const name = _path.split('/')
      .filter((s) => !/^\./.test(s))
      .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
      .join('')
      .replace(/\.vue$/, '')
    components[name] = context(_path).default
  })
  return components
}

const components = requireAll(require.context('./pages', true, /\.vue$/))

components にはパス名がPascalCaseされた名前をキーにしたコンポーネントが格納されるので、あとは環境にあわせて煮るなり焼くなり好きにしましょう。

new Vue({
  el: '#app',
  components
})

プロジェクトの都合でnuxtを導入できなかったりする時などに出番があるやもしれません。

Railsアプリ開発の際、フロントをVue.jsで書いているのですが、
「i18nをフル活用し、ソースコードに日本語のベタ書きは限りなくゼロにしていこう！」
とした場合、
「Vue.jsではどうすればいいの？」
となったので実装の記録を書き残します。

前提

• macOS Mojave 10.14.6
• Ruby 2.5.5
• Rails 5.2.3
• Vue 2.6.10

gem「i18n-js」を導入

Gemfile

gem 'i18n-js'

terminal

$ bundle install

JavaScriptでI18nを利用する場合、config/ja.ymlを直接使える訳ではなく、.jsに変換してそれを読み込んで利用します。
i18n-jsはその変換出力のためのgemです。

i18n-js.ymlを作成

どのように変換出力するかのルールを設定するファイルです。

公式などを見ると一般的に使われる設定ではtranslation.jsという１つのファイルに全ての言語の設定を詰め込むため、読み込みが重くなってしまいます。
なので言語別に出力されるよう設定します。

config/i18n-js.yml

translations:
- file: "app/assets/javascripts/i18n/%{locale}.js"

許可するlocaleを限定

後述するrake i18n:js:exportをこのまま実行してしまうと、許可されている全ての言語のjsファイルが生成されてしまいます。（私の場合90個ぐらいでした）
日本で開発されている方であれば、日本語と英語だけで十分かと思いますので今回はその2言語のみ生成されるようにします。

config/application.rb

# デフォルトのlocaleを日本語(:ja)にする
config.i18n.default_locale = :ja

# 許可するlocaleを日本語(:ja)と英語(:en)に限定する
config.i18n.available_locales = %i[ja en]

これでja.ymlはja.jsに、en.ymlはen.jsに変換出力されるようになります。

rake i18n:js:exportで出力

js用のlocaleファイルを変換するコマンドを実行します。

terminal

$ rake i18n:js:export

en.jsとja.jsは確認できましたか？
中を見てみるとyamlファイルで定義しているものを数行に凝縮していますね。
最終的にtメソッドはこれらのファイルからマッチするものを探してきます。

i18n.jsを編集

同時にpublic/javascript/にi18n.jsも出来ました。
機能の根幹となるメソッドがたくさん書いてあるファイルです。

この中からdefaultLocaleとlocaleを必要に応じて変更します。
railsのgemi18nとは別物なので、別途定義が必要です。

日本語であれば"ja"ですね。

また、以下については通常行わないのかもしれませんが、
public/javascript/i18n.jsをapp/assets/javascript/i18n.jsに移動してください。

私はしばらくconsoleで確認しても

• i18nが認識されない
• default_localeが"en"から変わらなかった

ので、i18n/ja.jsと同じapp/assets/javascript/に置くことで解決しました。

もしより良い解決策をご存知の方いらっしゃいましたらコメントお願いいたします。

head内でlocaleファイルの読み込み設定

railsのアセットパイプラインを使う方法と使わない方法があるのですが、
今回は使わない方法でheadタグ内でjavascript_include_tagを用いて読み込みを行います。
（i18n-js公式ドキュメントではどちらの方法も書いてあります。）

application.html.erb

  <head>
    <!-- 〜中略〜 -->
    <%= javascript_include_tag "i18n" %>
    <%= javascript_include_tag "i18n/#{I18n.locale}" %>
  </head>

I18n.localeの部分でユーザーそれぞれのlocaleが適用されます。

consoleでI18nコマンドが使えるか確認

現時点でI18nが使えるかどうか、
rails serverを立ち上げてローカルでRailsアプリにアクセスします。
chromeのデベロッパーツールで画像のように打ち込んで確認してみましょう。

2つ目はご自身のアプリで定義してあるものを適当に呼び出してみてくださいね。

vueファイルでI18nコマンドを省略するためのmixinを作成

i18n-jsによりjsファイルでは使えるようになりましたが、
vueファイルではまだ使えません。
そこでmixinを作成し、そのjsファイルを読み込むことでvueファイルでも使えるようにします。
どうせなら省略形でもメソッドが動いてくれるように工夫してみましょう。

mixins/i18n.js

export const i18n = {
    methods: {
        t: (...args) => I18n.t(...args),
        currentLocale: () => I18n.currentLocale()
    }
};

いちいちI18n.t('hoge')と打たなくてもt('hoge')だけでメソッドが機能します。

コンポーネントでmixinをimport

sample.vue

<template>
</template>

<script>
import { i18n } from "../mixins/i18n";

export default {
  mixins: [i18n]
}
</script>

vueファイルでtメソッドが使えるか確認

sample.vue

<template>
  <h2>{{ t('create') }}</h2>
</template>

<script>
import { i18n } from "../mixins/i18n";

export default {
  mixins: [i18n]
}
</script>

上記vueファイルが使われているページにアクセスし、
i18nで定義された日本語（今回の場合は「登録」）が表示されます。

以上です。お疲れ様でした！

おまけ1：本番環境へデプロイするにはrake assets:precompile

今回app/assets/に新たに作成されたファイルがあるので
本番環境へデプロイするにあたりprecompileが必要ですが、
対象から外れてしまっている場合は以下の設定で対象に含める必要があります。

production.rb

config.assets.precompile += %w( application.js application.css )

files = Dir[Rails.root.join('app', 'assets', 'javascripts', 'i18n', '*.js')]
files.map! {|file| file.sub(%r(#{Rails.root}/app/assets/javascripts/), '') }
config.assets.precompile += files

おまけ2：i18nのyamlファイルを修正した場合は？

terminal

$ rake i18n:js:export

修正を加える都度変換してください。

参考記事

・i18n-js 公式ドキュメント
　https://github.com/fnando/i18n-js
・[stackoverflow]単一のリポジトリでロケールを共有するRails + Vue.jsインスタンスにI18nがありますか？
　https://stackoverflow.com/questions/48950685/is-there-a-i18n-on-a-railsvue-js-instance-which-share-locales-in-a-single-repos
・[Qiita]i18n-jsで必要な言語のみロードしてパフォーマンスUP
　https://qiita.com/konifar/items/9886c7da97f20d3206cc
・[Qiita]react_railsとi18n-jsをwebpackerで動かす
　https://qiita.com/Atsuyoshi-N/items/48f8b5d5802b9ac47732#i18n%E3%81%AE%E8%A8%AD%E5%AE%9Arails%E5%81%B4

datepickerの使い方を簡単にまとめてみる

編集中、少々を待ち

背景

vueは<script>タグを直接組み込み！
すべてのコードを一つhtmlに書く！
ページ全体更新したくない！
特定のコンポーネントのみ更新したい！
という場合は、

[provide/inject]を使いましょう！

実装

実装ロジック：

reload()でisRouterShow(true/false)をコントロール！
これにより、router-viewの表示/非表示をコントロール！
さらに、これにより、コンポーネントの更新(reload)をコントロール！

1、親コンポーネントでproviderを作成

router-viewの表示/非表示をコントロール.html

<body>
  <div id="app">
       <router-view v-if='isRouterShow' class="reload"></router-view>  <!-- これ!router-viewの表示/非表示をコントロール -->
  </div>
</body>

reload().

 var vm = new Vue({
    router:router,
    el: '#app'
    provide() {
      return {
        reload: this.reload 
      }
    },
    data() {
      return {
        isRouterShow: true
      }
    },
    methods: {
      async reload() {                    //<-これ!isRouterShow(true/false)をコントロール！
        this.isRouterShow = false
        await this.$nextTick()
        this.isRouterShow = true
      }
    }
  })

2、子コンポーネントにinjectでreload()を導入！ reloadしたい場所に　this.reload(); で書けばいい！

child-reload.

 Vue.component('childreload', {
   inject: ['reload'],    // <- これ！injectによりこのコンポーネントの更新をコントロールできるようになる
    data:function() {
      return {
        dateValue: null
      }
    },
    methods: {
      abtn: function() {
        this.bus.$emit("passData", this.dateValue) ;
        this.reload();    //例えばここ
      }

    },
    template: '#XXXXXXX'
  })

背景

<script> タグを直接組み込み！
すべてのコードを一つhtmlに書く！
コンポーネントは親子じゃない！
の場合、
コンポーネント間の通信はどうすればいいの？

Vue.prototype.bus を使いましょう！

UI

コンポーネント二つある

コンポーネント1：datepicker
コンポーネント2：logvalue

動作：
confirmボタンを押すと、
コンポーネント[datepicker]で選択した日付をコンポーネント[logvalue]に反映できる

実装の説明

編集中・・少々を待ち

完成版のhtml

コンポーネント.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <title>兄弟コンポーネント間の通信</title>

</head>

<style>
  .box-card {
    width: 300px;
  }

  .el-header {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 60px;
    font-size: larger;
  }

  .el-row {
    margin-bottom: 20px;
  }

  .display-none {
    display: none;
  }
</style>



<body>
  <div id="app">
    <el-container>
      <el-header>兄弟コンポーネント間の通信</el-header>
      <el-main>
        <el-row>
          <router-view class="datepicker" name="datepicker"></router-view>
        </el-row>
        <router-view  class="logvalue" name="logvalue"></router-view>
      </el-main>
    </el-container>
  </div>
</body>

<script type="text/x-template" id="datePicker">
  <div class="block">
    <span id="datevalue" class="display-none">{{ dateValue }}</span>
    <el-tooltip class="item" effect="light" content="Pick a day" placement="top-start">
    <el-date-picker
      v-model="dateValue"
      type="date"
      format="yyyy/MM/dd"
      value-format="yyyyMMdd"
      placeholder="Pick a day">
    </el-date-picker>
    </el-tooltip>
      <el-button type="primary" @click="abtn">confirm</el-button>
    </div>
</script>

<script type="text/x-template" id="logvalueShow">
  <el-card class="box-card">
  <div class="logvalue">
   <span class="display" id="acceptDate" @passData="acceptdataEvent">{{acceptData}}</span>
</div>
</el-card>
</script>

<script>
  //componentsの間を通信できるようにVue.prototype.busを作成
  window.Vue.prototype.bus = new Vue()

  //componentsのtemplateを作成
  const logvalue = {
    template: '<log-value></log-value>'
  }
  const datepicker = {
    template: '<date-picker></date-picker>'
  }


  //component[datepicker]を定義
  Vue.component('date-picker', {
    data:function() {
      return {
        dateValue: null
      }
    },
    methods: {
      getdatatime:function() {
        var date = new Date();
        var s1 = date.getFullYear() + "" + (date.getMonth() + 1) + "" + (date.getDate());
        this.dateValue = s1;　　 
      },
      abtn: function() {
        this.bus.$emit("passData", this.dateValue)
      }

    },
    mounted:function() {
      let that = this;
      that.getdatatime()
    },
    template: '#datePicker'
  })


  //todayを定義
  var today = dateToStr24H(new Date(), 'YYYYMMDD');
  //フォーマットする自作関数
  function dateToStr24H(date, format) {
    if (!format) {
      format = 'YYYYMMDD'
    }
    //フォーマット文字列内のキーワードを日付に置換する
    format = format.replace(/YYYY/g, date.getFullYear());
    format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
    format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));
    return format;
  }
  //console.log(today);



  //component[logvalue]を定義
  Vue.component('log-value', {
    data:function() {
      return {
        logs: [],
        acceptData: null
      }
    },
    mounted:function() {
      let that = this;
      this.bus.$on('passData', function(data) {

        that.acceptData = data;

      })
    },
    created: function() {
      this.acceptdataEvent();
    },
    methods: {
      acceptdataEvent: function() {
        let that = this;
        this.bus.$on('passData', function(data) {
          this.acceptData = data;
        })
      }
    },
    template: '#logvalueShow'
  })

  const routes = [{
      path: '/login',
      components: {
        logvalue: logvalue,
        datepicker: datepicker
      }
    },
    {
      path: '*',
      redirect: '/login'
    }
  ];
  const router = new VueRouter({
    routes:routes
  });


  router.beforeEach(function(to, from, next)  {
    if (to.matched.some(function(record) {record.meta.requiresAuth})) {
      if (!auth.loggedIn()) {
        next({
          path: '/login',
          query: {
            redirect: to.fullPath
          }
        })
      } else {
        next()
      }
    } else {
      next()
    }
  });


  var vm = new Vue({
    router:router,
    el: '#app'
  })
</script>

</html>

@vue/cliを4系にしました。

https://cli.vuejs.org/migrating-from-v3/

特段ムズカシイことはありませんでた。

で、テストを実施したところ...

yarn vue-cli-service test:unit --coverage --verbose --silent

あれ？？

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|

カバレッジが0になっちゃいました。

設定変えてないんですけどね。変えなきゃいけなくなったんでしょうか？

前述のここをみたところ、プリセットが用意されているようです。
https://cli.vuejs.org/migrating-from-v3/

package.json

〜〜〜
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest",
〜〜〜

だけでいいとか、でも自分のはcollectCoverageFromで明示してたんですよね。

package.json

〜〜〜
  "jest": {
    〜〜〜
    "collectCoverageFrom": [
      "src/**/*.{vue}",
    ]
〜〜〜

なんでこれでダメなの？？と思いいろいろ試してたんですが解決しました。

これでうまく行きました。*.{vue}から*.vueへの変更です。

package.json

〜〜〜
  "jest": {
    〜〜〜
    "collectCoverageFrom": [
      "src/**/*.vue",
    ]
〜〜〜

結果もこの通り。

-------------------------------|----------|----------|----------|----------|-------------------|
File                           |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------------------|----------|----------|----------|----------|-------------------|
All files                      |      100 |      100 |      100 |      100 |                   |
 src                           |      100 |      100 |      100 |      100 |                   |
  App.vue                      |      100 |      100 |      100 |      100 |                   |
〜〜〜〜

なんで{}がダメになっちゃったんでしょうね〜

開発環境

• laravel5.8
• vue2
• veevalidate3

参考資料

• 公式：https://logaretm.github.io/vee-validate/
• https://logaretm.github.io/vee-validate/guide/validation-provider.html#higher-order-components

veeValidate3の設定

• app.jsで必要な物をimport(vueとveevalidateはnpm installしていることを前提)

app.js

import Vue from 'vue'
import './validate'

import {
    ValidationProvider,
    configure,
    localize,
    extend,
} from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja';

Vue.component('ValidationProvider', ValidationProvider);

// 共通で変更したいoptionがあれば
configure({
    bails: false,
});

// 一括でrulesをextend
import * as rules from 'vee-validate/dist/rules';
for (let rule in rules) {
    extend(rule, rules[rule]);
}

localize('ja', ja);

バリデーション実行

• templateに記述する例

sample.vue

<ValidationProvider rules="required" ref="mail" v-slot="{ errors }">
     <input v-model="email" type="text" />
     <span>{{ errors[0] }}</span>
</ValidationProvider>

rluesで適応させるバリデーションを設定
以下でバリデーションの種類を確認できる

github
https://github.com/logaretm/vee-validate/tree/master/src/rules

エラーメッセージの変更

バリデーション結果の取得

ボタン押下時のバリデーション

• $refsを使用しバリデーションを実行

sample.vue

<template>
    <div class="container--small">
        <ValidationProvider rules="required" ref="myinput" v-slot="{ errors }">
            <input v-model="value" type="text" />
            <span>{{ errors[0] }}</span>
        </ValidationProvider>

        <button @click="validateField()">Submit</button>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    computed: {},
    methods: {
        validateField() {
            // Validate the field
            return this.$refs.myinput.validate();
        }
    },
    created() {}
};
</script>

別ファイルでバリデーション追加

画面固有バリデーション

checkboxのバリデーション

sample.vue

<template>
    <div class="container--small">
        <P>check box v-for</P>
        <div class="form-check">
            <label class="form-check-label">
                <ValidationProvider rules="required" v-slot="{ errors }">
                    <div v-for="(item, index) in checkArray" :key="index">
                        <input type="checkbox" v-model="checkValue" :value="item.id" />
                        {{ item.val }}
                    </div>
                    <span>{{ errors[0] }}</span>
                </ValidationProvider>
            </label>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // チェック結果が入りv-modelをrequiredチェックしている
            checkValue: [],
            checkArray: [
                { id: "1", val: "coffe" },
                { id: "2", val: "milk" },
                { id: "3", val: "cake" }
            ]
        };
    },
    computed: {},
    methods: {},
    created() {}
};
</script>