Vue.jsを使ったリポジトリを他の端末にgit cloneするもlocalhostが真っ白で何も表示されない場合。 VueRouterが端末にインストールされていないか、移行アシスタントで別のMacにデータを移したかのどっちかの可能性が高い。 VueRouterがインストールされていない場合 ブラウザでhttp://...
Vue.js
フロントのJavaScriptフレームワーク
Vue.jsの記事一覧
任意の配列の中に、バリデートしたいターゲットの値が存在するかを確認したいとする。 例えばフロントで指定しているユーザー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="...
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...
this.$router.push({name: '移動先コンポーネントの名前', params: {キー名: "値"}}) で可能。 投稿後にアーカイブページに移動して、「投稿しました」って表示 ログインにアカウントページに移動して、「ログインしました」って表示 ログアウトペー...
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 ...
1
2