非フォーカス時にプレースホルダが表示されない Vuetifyのあるバージョンから、v-combobox や v-autocomplete において、フォーカスが当たっていない状態ではプレースホルダが表示されない不具合がある。 どうやら、チップ表示時に限定の不具合らしい。 対策 単純に不具合らしいので、そのうち治ると思うが、v2.5.0 の時点では発生していたので対応策が必要です。 Vuetifyの指定を下記のCSSで上書きしてやれば治ります。 .v-autocomplete:not(.v-input--is-focused).v-select--chips input { max-height: inherit; } inputの高さがゼロになっているのが原因みたいですね。 参考

【開発環境】 Windows 10 HOME PHP 7.4.7 MySQL Laravel Framework 8.4 vue : 2.6.12 vue-router : 3.5.1 vee-validate : 3.4.9 vue-axios-interceptors : 0.3.2 【目次】 　　項目　　　　　 - はじめに - 前提条件 - 使い方 - 最後に - 参考 はじめに Vue.js + Laravel8.4でAxios(Ajax)のエラーハンドリングしてみました。 Vue.js + Laravelの勉強をしており、 下記の記事を見て動かしてみましたが CRUDの最小構成のシステムで もっと機能を追加したという事で、今回の記事にしたという経緯です。 (2021年6月11日現在) Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編 Vue.jsとLaravelによるSPA記事で下記の記事で構成しています。 (未リンクの記事はこれから作成予定) ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Vue.js + Laravel8.4でVeeValidateを使ってバリデーションしてみる Vue.js + Laravel8.4でAxiosのエラーハンドリングしてみる ↑↑↑↑↑↑今回はここです↑↑↑↑↑↑ [Vue.js + Laravel8.4でLaravel側もバリデーションしてみる] [Vue.js + Laravel8.4でLaravel側のAPIの認証処理してみる] ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Github でもソースを公開していますので参考にして下さい。 前提条件 参考にさせて頂いた記事との開発環境の相違箇所。 ・Laravel のバージョンが異なる Laravel 6.* App\Task; ↓ Laravel 8.4 App\Models\Task; 上記のようにLaravel 8.*ではコントローラーのパスが 変更されていますので適宜変更して下さい。 ・入力項目のCSSを若干変更しています。 ・DBはMySQLを使用 使い方 ＜script＞ 部分の修正。 resources/js/components/TaskCreateComponent.vue <script> ・・・ getTasks() { axios.get('/api/tasks') .then((res) => { this.tasks = res.data; }) // ほとんどのエラーをキャッチ Vue.config.errorHandler = function (err, vm, info) { // 2.2.0 以降で使用可 alert(err); } // 残りのエラーをキャッチ window.addEventListener("error", event => { alert(event.error); }); window.addEventListener("unhandledrejection", event => { alert(event.reason); }); ・・・ </script> Vue.config.errorHandler Vuejs内のエラーを一元的に処理したい場合に有効 例えば、全ての画面でのどんなエラーでも収集したい場合 addEventListener JavaScriptからさまざまなイベント処理を実行することができるメソッド。 例として、こんな感じです。 Webページが読み込まれたかどうか？ マウスによるクリックがされたかどうか？ フォームに何らかの操作が行われたかどうか？ キーボードから入力が行われたかどうか？ 別の処理方法もある そして上記のやり方とは別に 下記は古い？処理方法のやり方っぽいです。 resources/js/components/TaskCreateComponent.vue .catch(function (error){ if(error.reponse){ console.log(error.reponse.data); console.log(error.reponse.status); console.log(error.reponse.header); } else if (error.request) { // 要求がなされたが、応答が受信されなかった console.log(error.request); } else { // トリガーしたリクエストの設定に何かしらのエラーがある console.log('Error', error.message); } console.log(error.config); }); 更に余裕があれば　vue-axios-interceptors　を使ってみる。 (対象 : Laravel 5.5以上) vue-axios-interceptors ますはターミナルでインストール。 npm install vue-axios-interceptors --save そして下記の2ファイルを修正。 resources\js\app.js /* vue-axios-interceptors */ require('vue-axios-interceptors'); window.axios = require('axios'); resources\js\components\TaskListComponent.vue /* axios.interceptors */ mounted() { window.intercepted.$on('response', data => { console.log(data); // { status: 404, code: 'Not found', body: null } }); this.getTasks(); } vue-axios-interceptorsを使うことによって 例えばgoogle chrome developer toolsでF12で起動し Consoleのタブでレスポンスの内容を赤枠部分に表示出来ます。 commit：Axios エラーハンドリング 最後に Vue.jsは勉強して日が浅く、 間違い等があるかもしれません。 修正点等ありましたらコメント下さい。 参考 【Ajax】axiosを使って簡単にHTTP通信

【開発環境】 Windows 10 HOME PHP 7.4.7 MySQL Laravel Framework 8.4 vue : 2.6.12 vue-router : 3.5.1 vee-validate : 3.4.9 【目次】 　　項目　　　　　 - はじめに - 前提条件 - インストール - 使い方 - 解説 - 最後に - 参考 はじめに Vue.js + Laravel 8.4で VeeValidate を使ってバリデーションしてみました。 Vue.js側のバリデーションを調べてみたところ いくつかありかしたが今回はVeeValidateを使ってみました。 Vue.js + Laravelの勉強をしており、 下記の記事を見て動かしてみましたが CRUDの最小構成のシステムで もっと機能を追加したという事で、今回の記事にしたという経緯です。 (2021年6月11日現在) Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編 Vue.jsとLaravelによるSPA記事で下記の記事で構成しています。 (未リンクの記事はこれから作成予定) ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Vue.js + Laravel8.4でVeeValidateを使ってバリデーションしてみる ↑↑↑↑↑↑今回はここです↑↑↑↑↑↑ Vue.js + Laravel8.4でAjaxのエラーハンドリングしてみる [Vue.js + Laravel8.4でLaravel側もバリデーションしてみる] [Vue.js + Laravel8.4でLaravel側のAPIの認証処理してみる] ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Github でもソースを公開していますので参考にして下さい。 前提条件 参考にさせて頂いた記事との開発環境の相違箇所。 ・Laravel のバージョンが異なる Laravel 6.* App\Task; ↓ Laravel 8.4 App\Models\Task; 上記のようにLaravel 8.*ではコントローラーのパスが 変更されていますので適宜変更して下さい。 ・入力項目のCSSを若干変更しています。 ・DBはMySQLを使用 インストール ターミナルを開き 対象ディレクトリで下記のコマンド実行します。 npm install vee-validate 使い方 ＜script＞ 部分の修正。 resources/js/components/TaskCreateComponent.vue <script> import Vue from 'vue' import { ValidationObserver, ValidationProvider, localize, extend, } from 'vee-validate' // ルール設定 import * as rules from 'vee-validate/dist/rules' for (let rule in rules) { extend(rule, rules[rule]) } // 日本語化 import ja from 'vee-validate/dist/locale/ja' localize('ja', ja) // コンポーネント設定 Vue.component('ValidationProvider', ValidationProvider) Vue.component('ValidationObserver', ValidationObserver) export default { data: function () { return { task: {} } }, methods: { submit() { this.$refs.observer.validate().then((result) => { if(result) { // OK axios.post('/api/tasks', this.task) .then((res) => { this.$router.push({name: 'task.list'}); }); } }) } } } </script> ＜template＞側の修正 今回は下記にバリデーションを設定します。 ・Title ・Content resources/js/components/TaskCreateComponent.vue <template> <div class="container"> <div class="row justify-content-center"> <div class="col-sm-6"> <ValidationObserver ref="observer" v-slot="{ invalid }"> <form v-on:submit.prevent="submit"> <div class="form-group row"> <label for="title" class="col-sm-3 col-form-label">Title</label> <ValidationProvider name="title" rules="required|min:5|max:30" v-slot="{ errors }" > <input type="text" name="title" class="col-sm-9 form-control" v-model="task.title"> <div class="text-danger">{{ errors[0] }}</div> </ValidationProvider> </div> <div class="form-group row"> <label for="content" class="col-sm-3 col-form-label">Content</label> <ValidationProvider name="content" rules="required|min:10|max:50" v-slot="{ errors }" > <input type="text" class="col-sm-9 form-control" name="content" v-model="task.content"> <div class="text-danger">{{ errors[0] }}</div> </ValidationProvider> </div> <div class="form-group row"> <label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label> <input type="text" id="person-in-charge" class="col-sm-9 form-control" v-model="task.person_in_charge"> </div> <div> <button type="submit" :disabled="invalid" class="btn btn-primary">Submit</button> </div> </form> </ValidationObserver> </div> </div> </div> </template> 新規登録画面で文字を入力してみると 赤文字でバリデーションが表示されています。 解説 ---- モードについて mode="モード"で設定することができます。 aggressive：入力値を変更するたび passive：フォームが送信時 lazy：フォーカスが外れた時 or 選択が変更時（blur or change） eager：aggressiveとlazyのミックス vee-validate公式 VeeValidate comes with 4 interaction modes out of the box: [aggressive]: this is the default behavior and it validates whenever an input event is emitted. [passive]: doesn't validate on any event, so you can only validate manually. [lazy]: validates on change or blur depending on the input type. [eager]: when the field is valid or has not yet been interacted with, it will validate on change. When the field becomes invalid due to the first validation, it will validate on input for as long the field is invalid. When the field is valid again, it will go back to validating on change. It is a mix between the aggressive and lazy modes. 何となくeagerが良いのかと。 resources/js/components/TaskCreateComponent.vue <ValidationProvider name="title" rules="required|min:5|max:30" // 5-30文字で入力必須 v-slot="{ errors }" //エラー判定のスイッチみたいなもの > 【ValidationProvider】 フォーム部品のエラーを監視。 【ValidationObserver】 フォーム全体を監視。 フォーム全体のバリデーションの通過の判定。 resources/js/components/TaskCreateComponent.vue submit() { this.$refs.observer.validate().then((result) => { if(result) { // OK axios.post('/api/tasks', this.task) .then((res) => { this.$router.push({name: 'task.list'}); }); } }) } この2つをタグに設定すると バリデーションを通過するまで送信ボタンを無効にする。 v-slot="{ invalid } :disabled="invalid" resources/js/components/TaskCreateComponent.vue <ValidationObserver ref="observer" v-slot="{ invalid }"> ・・・ <button type="submit" :disabled="invalid" class="btn btn-primary">Submit</button> </ValidationObserver> commit：VeeValidate 新規登録画面 最後に ご覧頂きありがとうございました。 Vue.jsは勉強して日が浅く、 間違い等があるかもしれません。 修正点等ありましたらコメント下さい。 参考 Vue.jsでVeeValidateを使ってバリデーション

vueでwebサイトを作っていくよ 備忘録としてだから、気にせず書いていこう まずはvueをcreateするよ vue create hoge その後の設定は以下 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? No eslintとかの設定を頑張ろう eslintの設定を変えていく yarn eslint --init yarn run v1.22.10 ? How would you like to use ESLint? To check syntax and find problems ? What type of modules does your project use? JavaScript modules (import/export) ? Which framework does your project use? Vue.js ? Does your project use TypeScript? No ? Where does your code run? Browser ? What format do you want your config file to be in? JavaScript The config that you've selected requires the following dependencies: eslint-plugin-vue@latest ? Would you like to install them now with npm? Yes よくわからなかったけど、下の記事を参考にしました 最初の初期設定でpackage.jsonに設定を書く。みたいな設定にしちゃったけど大丈夫かな笑 PrettierとESLintをVSCodeで使う（Vue） 記事通り.eslintrc.jsに追加 ちょっとエラー出ちゃったので、そこだけ変えました module.exports = { env: { browser: true, es6: true, }, extends: [ "eslint:recommended", "plugin:vue/essential", "plugin:prettier/recommended", ], globals: { Atomics: "readonly", SharedArrayBuffer: "readonly", }, parserOptions: { ecmaVersion: 2018, sourceType: "module", }, plugins: ["vue", "prettier"], rules: { "prettier/prettier": "error", }, }; 記事ではprettierrcにも追加しているけど、今回はしない .vscodeのsetting.jsonに以下を追加 { "workbench.colorTheme": "Default Light+", //ワークベンチのテーマ デフォルトの白 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.organizeImports": true, "source.fixAll": true }, "editor.formatOnPaste": false, "editor.formatOnSave": false, "editor.formatOnType": true, "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript"], "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.js": "prettier-eslint", "vetur.format.defaultFormatter.ts": "vscode-typescript", "vetur.validation.template": false } 設定完了！！ おお、、これらをやったらいい感じにeslintも動くし、色とかもいい感じだ！！ あとは、eslintignoreとか今度作ろうかな

この記事の執筆時点で、Vue 3 に対応した Vuetify はまだアルファ版です。 https://vuetifyjs.com/ja/introduction/roadmap/ リリース目標は 2021 年の Q3 らしいですが、待ちきれないので、現時点で公開されているアルファ版を入れてみました。 単純に add するだけ すでに vue-cli で Vue 3 のプロジェクトがある前提で、次のコマンドを実行します。 $ docker-compose run vue vue add vuetify ちなみに、上記コマンドの意味は「docker-compose.yml でサービス名が『vue』と定義されたコンテナに『vue add vuetify』というコマンドを実行させる」です。 （なので「vue vue」と重複しているのは typo ではありません） 実行すると「どの vuetify を入れるんだよ?」と聞かれるので「V3 (alpha)」を選択します。 すると、、、 ? Choose a preset: V3 (alpha) ? Invoking generator for vue-cli-plugin-vuetify... ? Installing additional dependencies... added 3 packages in 8s ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify vuetify Discord community: https://community.vuetifyjs.com vuetify Github: https://github.com/vuetifyjs/vuetify vuetify Support Vuetify: https://github.com/sponsors/johnleider ……と追加完了します。 確認 package.json を確認すると、vuetify 3 のアルファ版が追加されています。 package.json "dependencies": { "@mdi/font": "5.9.55", "core-js": "^3.6.5", "roboto-fontface": "*", "vue": "^3.0.0", "vue-router": "^4.0.0-0", "vuetify": "^3.0.0-alpha.0", // ←追加されてる "vuex": "^4.0.0-0" }, それから、ちょいちょいファイルが書き変わってますね。 こんな感じで。 main.js import { createApp } from 'vue' import vuetify from './plugins/vuetify' // ←追加 import App from './App.vue' import router from './router' import store from './store' const app = createApp(App) app.use(router) app.use(store) app.use(vuetify) // ←追加 app.mount('#app') うーん、それにしても、入れたはいいが使い方がよく分からん?