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

WordPressにおうて、プラグインがサイトに出力するコードを書き換えたいときがある。 文字列だけでなく、html上の細かい要素など 。 しかし、プラグインファイルを直接編集するやり方だとプラグイン更新のたびに再編集が必要になる。 そこで、javascriptを使ってコードそのものを書き換えてしまう方法がある。（置き...

Notionにマークダウン記法で記載されたJavaScriptのコードブロックをコピーして、WordPressやVSCode、その他のテキストエディタに貼り付けると、jsxとして認識されてしまう。 WP Githuber MDなどのプラグインを使ってマークダウンでブログを書いている場合なんかはjsxとして認識されるとコ...

内部リンクだろうととにかく新しい記事で開いてほしい。だって、リンク元の記事に戻ってきてほしいもん。 という場合は、function.phpに下記のコードを追記するだけで可能。 function internal_links_new_tab() { // Check if it's a single post ...

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() { //確実に処理を完了させ...

変数の型を見直したほうがいい説。 上記のようなデータベースから、選択肢を作成 ↓ ↓こんな感じのコードになる <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 と叩...

propsで受け取った内容をhtmlに{{hoge}}と書いて使うのではなく、javascriptで使いたい場合はどこで呼び出すべきか export default { props: { singleId: { type: Number, }, }, created() { this.getInquiryData(th...

app.js:7075 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'hoge') みたいなエラーが出る場合 アロー関数使え。 アローじゃない関数使ってたらthis.で定義した内容は使えな...

::v-deepをCSS側で付与して解決。 ↓こんな感じ。 .thumbnail { flex-grow: 1; object-fit: cover; max-height: 150px; max-width: 300px; margin: 0.2rem; border-radius: 4px; } ::v-deep ...

Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue vueファイルをVSコード(Visual Stuio Code)で編集していてこのエラーが出たら。 :key=〇〇が抜けていると思われる。 //Hoge.vue編...

全部ばらばらにメモしてたけど、探すの面倒くさくなってきたからここにまとめて書く。 また他のパターンもあればこの記事にどんどん追加する予定。 親コンポーネントから子コンポーネントに変数を渡す方法 propsを使う。 //Oya.vue <Ko :hoge="fuga"/> //中略 dat...

Vue.jsとLaravelを使う方法。 投稿の個別ページに作り方。 ブログの記事1個1個の一意のURL みたいなイメージ。 http://hogehoge.com/post/1 にアクセスすると、idが1番に該当する記事が出てくる。 そんな感じ。 バックエンド まずはAPIをつくる。 <?php //プロジェク...