Vue.js javascriptreplaceバリデーション TypeError: Cannot read properties of null (reading 'replace') 2023年8月15日 replace関数を使うと Error in v-on handler: "TypeError: Cannot read properties of null (reading 'replace')” とのエラーが表示されてしまう場合。 文字列を置き換える元の値が空の場合は、エラーになって...
Laravel phpvuetifysql レコード更新後、アーカイブの順番が変動してしまう 2023年8月1日 created_atカラムを更新させるシステムには気をつけろ!秒数まで明示的に更新しないとアーカイブの順番が入れ替わりまくるぞ! 事象 私が開発に取り組んでいたプロジェクトは、ユーザーの問い合わせを記録し、新しい投稿順に表示するWebアプリケーションでした。 ユーザーが過去の日付の問い合わせを書き忘れていた場合には、そ...
Vue.js vuetify vuetifyでサイドメニューのブレークポイントを変更する 2023年7月10日 VuetifyはVue.js用のMaterial Designフレームワークで、多くの事前設計されたコンポーネントを提供しています。 その一つにv-navigation-drawerというコンポーネントがあり、このコンポーネントを使用するとサイドメニューの作成が簡単になります。 v-navigation-drawerコ...
Vue.js javascriptvuex 複数のvueファイルで使い回す関数をvuexに統合する 2023年7月4日 A.vueとB.vueで全く同じ関数を使う なんてことはよくある。 例えば電話番号をコピーする関数とかね。 同じコードを別々のファイルにかいていると、メンテナンス性が悪いのでvuexにまとめて書いて呼び出しちゃおうよ!って話。 vuex側の設定 // プロジェクトディレクトリ/resources/js/store/in...
Vue.js javascriptMacgitgithub 引っ越し|Vue.js リポジトリをgit cloneするもlocalhostが真っ白 2023年4月22日 Vue.jsを使ったリポジトリを他の端末にgit cloneするもlocalhostが真っ白で何も表示されない場合。 VueRouterが端末にインストールされていないか、移行アシスタントで別のMacにデータを移したかのどっちかの可能性が高い。 VueRouterがインストールされていない場合 ブラウザでhttp://...
Vue.js vuetifyindexof vuetifyでindexofを使ったバリデーションルールが発火しない 2023年4月17日 任意の配列の中に、バリデートしたいターゲットの値が存在するかを確認したいとする。 例えばフロントで指定しているユーザーIDが本当に存在するか など。 しかし、この時に何を試すも結果が-1(存在しないって意味)になることがある。 operatorIdExitscheck: (v) => { console.log(...
Laravel Laravel axios.getテストケースで引数にオブジェクトを指定する時の書き方 2023年1月23日 フロントにてaxios.getの引数にオブジェクトを指定して呼び出すapiがある(絞り込み検索機能とか) Laravelのテストコードを書きたい 書き方は? 結論 実際にAPIを叩いた時のヘッダー情報を開発者モードから見ればいい F12(開発者モードを開く) > ネットワーク > 名前 より該当APIを選択...
Vue.js javascript Vue.js input fileで同じファイルを選択すると再認識してくれない 2022年11月29日 inputでファイルを選んだ後に、該当がいるを修正してもう一度再認識させてから投稿したい場合がある。 しかしそのままだと同じファイル名なので違いがないとみなされ、再認識してくれない。 修正前のファイルをアップロード投資てしまうことになる なので、再認識させよう。 <template> <div>...
Vue.js javascriptvuexcsvvue-papa-parse vue-papa-parseでjsonに変換した値をスコープ外で使う方法 2022年11月22日 インストールや取得方法はこの人の記事を見てくれ。 VueでCSV→JSON変換。vue-papa-parseの使い方 | とあるエンジニアのエソラゴト 上記の記事は、ここで終わっている。 onSubmit(evt) { evt.preventDefault(); this.$papa.parse(this.file, ...
Vue.js javascriptvuex vuexのstateの変化をvueで検知する方法 2022年11月22日 vuexはインストール済みとする。 インストールしていない人はこちらの記事を参照。 vuexの基本的な使い方 導入方法と変数の取得・更新 vuexの設定 //プロジェクトディレクトリ/resources/js/store/index.js //中略 state: { value: "aaaa", }...
Vue.js javascriptapiaxios APIの処理が終了してから次に進む! Vue.jsでのasync awaitの使い方 2022年11月16日 APIの結果が返ってきてから、次の処理を行ってね! 必要な情報が揃う前に勝手に先に進もうとしないでね! ってことができるのがasync await シンプルに言うとそういうことやろ? なんか、他の人の記事の説明ばりわかりにくくない? 使い方 async getYourFavorites() { //確実に処理を完了させ...
Vue.js apivue-chartjs vue-chartjsでapiから取得した動的な値でグラフを生成する方法 2022年11月13日 axiosを使って、バックエンドから取得した情報をもとにグラフを生成する方法。 結論とてはasync mounted上でawaitありでapiを呼び出せばできる。 インストール方法 わかる人は飛ばして。 プロジェクトディレクトリ上で、 npm install vue-chartjs@3.4.2 npm install ...
Vue.js javascriptvuetify vuetify v-autocompleteの内容を動的に選択したいが選べない時の対処法 2022年11月9日 変数の型を見直したほうがいい説。 上記のようなデータベースから、選択肢を作成 ↓ ↓こんな感じのコードになる <v-autocomplete v-model="detailSearchKey.operator" item-value="id" item-text="...
Laravel phpjavascript Laravel+Vue CSVからデータベースのテーブルに情報を一括登録する 2022年11月6日 LaravelとVue.jsを使って、CSVファイルに記載された情報(複数レコード)をデータベースに一括登録する方法を解説。 ライブラリ「Laravel-Excel」 今回は、Customers(顧客)テーブルに複数の顧客を登録することを想定。 Laravel-Excelのインストールと設定ファイル生成 compose...
Laravel phpjavascript Vue+Laravel 複合条件絞り込み検索(ページネーション付)実装方法 2022年11月5日 LaravelとVue.jsを使って複数条件の検索を実装するぜ 今回は、 type(機種) key(キーワード) の2つの複合検索を想定。 type(機種)はInquiryテーブルのtypeカラム を検索対象とし、 key(キーワード)はInquiryテーブルの answerカラム と questionカラム の 両方...
Vue.js javascriptvuetify v-autocompleteでキーと値を個別に設定したい場合 [Vuetify] 2022年10月27日 選択肢をブラウザ上で選ぶときは日本語の名前から選択するけど、 選ばれたものをポストするときには、IDをapiに送信したい! みたいな場合。 完成イメージ↓ this.operatorsの中身が、こんな感じだとする↓ 表示上はID、選択肢としてはnameを表示したい。 <v-autocomplete v-model...
Vue.js javascriptvuex vuexの基本的な使い方 導入方法と変数の取得・更新 2022年10月26日 いろんな記事を見たが、自分の乏しい理解力ではもっと細かく説明してほしいとおもった ので、導入方法から使い方までまとめる。 インストール まずはプロジェクトディレクトリでコマンドを叩いてインストール。 npm install --save vuex ↑これだとエラーが出たり最終的にコンパイルができないことがあった。 そん...
Vue.js javascriptVue Text Highlight Vue.js 検索結果のキーワード一致部分をハイライト(強調)する方法 2022年10月26日 検索結果のキーワード(クエリ)一致部分をハイライトする(色を付ける)方法 Vue Text Highlight というライブラリを使う。 準備 前提条件として、検索機能は実装済みとする。 インストール アプリのプロジェクトディレクトリ内で npm install --save vue-text-highlight と叩...
Vue.js bootstrap-vue Bootstrap-vue ループ中にトグルを設置する方法 2022年10月21日 ・クリックで該当のオブジェクトに関する情報だけが展開するtoggleを作成する ・全部のオブジェクトのトグルが一緒に開くような愚行は許さない ・クリックすると矢印のアイコンは逆向きになる オブジェクト配列stocksを回す <span v-for="stock in stocks" :key=...
Vue.js vuetify Vue フレームワークVuetifyで使えるアイコン一覧サイトと使い方 2022年10月21日 Material Design Iconsというサイトがある。 ここから探す。(アイコンは英語で検索) Material Design Icons 例えばごみ箱のアイコンならtrashと検索する。 好きなアイコンを選択すると、 import { mdiTrashCanOutline } from '(http...