Vue.js

replace関数を使うと Error in v-on handler: "TypeError: Cannot read properties of null (reading 'replace')” とのエラーが表示されてしまう場合。 文字列を置き換える元の値が空の場合は、エラーになって...

created_atカラムを更新させるシステムには気をつけろ！秒数まで明示的に更新しないとアーカイブの順番が入れ替わりまくるぞ！ 事象 私が開発に取り組んでいたプロジェクトは、ユーザーの問い合わせを記録し、新しい投稿順に表示するWebアプリケーションでした。 ユーザーが過去の日付の問い合わせを書き忘れていた場合には、そ...

VuetifyはVue.js用のMaterial Designフレームワークで、多くの事前設計されたコンポーネントを提供しています。 その一つにv-navigation-drawerというコンポーネントがあり、このコンポーネントを使用するとサイドメニューの作成が簡単になります。 v-navigation-drawerコ...

A.vueとB.vueで全く同じ関数を使う　なんてことはよくある。 例えば電話番号をコピーする関数とかね。 同じコードを別々のファイルにかいていると、メンテナンス性が悪いのでvuexにまとめて書いて呼び出しちゃおうよ！って話。 vuex側の設定 // プロジェクトディレクトリ/resources/js/store/in...

Vue.jsを使ったリポジトリを他の端末にgit cloneするもlocalhostが真っ白で何も表示されない場合。 VueRouterが端末にインストールされていないか、移行アシスタントで別のMacにデータを移したかのどっちかの可能性が高い。 VueRouterがインストールされていない場合 ブラウザでhttp://...

任意の配列の中に、バリデートしたいターゲットの値が存在するかを確認したいとする。 例えばフロントで指定しているユーザーIDが本当に存在するか など。 しかし、この時に何を試すも結果が-1(存在しないって意味)になることがある。 operatorIdExitscheck: (v) => { console.log(...

フロントにてaxios.getの引数にオブジェクトを指定して呼び出すapiがある(絞り込み検索機能とか) Laravelのテストコードを書きたい 書き方は？ 結論 実際にAPIを叩いた時のヘッダー情報を開発者モードから見ればいい F12(開発者モードを開く) > ネットワーク　> 名前 より該当APIを選択...

inputでファイルを選んだ後に、該当がいるを修正してもう一度再認識させてから投稿したい場合がある。 しかしそのままだと同じファイル名なので違いがないとみなされ、再認識してくれない。 修正前のファイルをアップロード投資てしまうことになる なので、再認識させよう。 <template> <div>...

インストールや取得方法はこの人の記事を見てくれ。 VueでCSV→JSON変換。vue-papa-parseの使い方 | とあるエンジニアのエソラゴト 上記の記事は、ここで終わっている。 onSubmit(evt) { evt.preventDefault(); this.$papa.parse(this.file, ...

vuexはインストール済みとする。 インストールしていない人はこちらの記事を参照。 vuexの基本的な使い方 導入方法と変数の取得・更新 vuexの設定 //プロジェクトディレクトリ/resources/js/store/index.js //中略 state: { value: "aaaa", }...

APIの結果が返ってきてから、次の処理を行ってね！ 必要な情報が揃う前に勝手に先に進もうとしないでね！ ってことができるのがasync await シンプルに言うとそういうことやろ？ なんか、他の人の記事の説明ばりわかりにくくない？ 使い方 async getYourFavorites() { //確実に処理を完了させ...

axiosを使って、バックエンドから取得した情報をもとにグラフを生成する方法。 結論とてはasync mounted上でawaitありでapiを呼び出せばできる。 インストール方法 わかる人は飛ばして。 プロジェクトディレクトリ上で、 npm install vue-chartjs@3.4.2 npm install ...

変数の型を見直したほうがいい説。 上記のようなデータベースから、選択肢を作成 ↓ ↓こんな感じのコードになる <v-autocomplete v-model="detailSearchKey.operator" item-value="id" item-text=&quot...

LaravelとVue.jsを使って、CSVファイルに記載された情報（複数レコード）をデータベースに一括登録する方法を解説。 ライブラリ「Laravel-Excel」 今回は、Customers(顧客)テーブルに複数の顧客を登録することを想定。 Laravel-Excelのインストールと設定ファイル生成 compose...

LaravelとVue.jsを使って複数条件の検索を実装するぜ 今回は、 type(機種) key（キーワード） の2つの複合検索を想定。 type(機種)はInquiryテーブルのtypeカラム を検索対象とし、 key(キーワード)はInquiryテーブルの answerカラム　と questionカラム　の 両方...

選択肢をブラウザ上で選ぶときは日本語の名前から選択するけど、 選ばれたものをポストするときには、IDをapiに送信したい！ みたいな場合。 完成イメージ↓ this.operatorsの中身が、こんな感じだとする↓ 表示上はID、選択肢としてはnameを表示したい。 <v-autocomplete v-model...

いろんな記事を見たが、自分の乏しい理解力ではもっと細かく説明してほしいとおもった ので、導入方法から使い方までまとめる。 インストール まずはプロジェクトディレクトリでコマンドを叩いてインストール。 npm install --save vuex ↑これだとエラーが出たり最終的にコンパイルができないことがあった。 そん...

検索結果のキーワード（クエリ）一致部分をハイライトする（色を付ける）方法 Vue Text Highlight というライブラリを使う。 準備 前提条件として、検索機能は実装済みとする。 インストール アプリのプロジェクトディレクトリ内で npm install --save vue-text-highlight と叩...

・クリックで該当のオブジェクトに関する情報だけが展開するtoggleを作成する ・全部のオブジェクトのトグルが一緒に開くような愚行は許さない ・クリックすると矢印のアイコンは逆向きになる オブジェクト配列stocksを回す <span v-for="stock in stocks" :key=...

Material Design Iconsというサイトがある。 ここから探す。（アイコンは英語で検索） Material Design Icons 例えばごみ箱のアイコンならtrashと検索する。 好きなアイコンを選択すると、 import { mdiTrashCanOutline } from '(http...