vue

【javascript】非同期通信を同期処理する

フロントエンドで初期データを外部APIから取得したい場合があります。 データ通信はajax を用いるのは一般的です。 ajaxでデータを取得して画面内の要素を更新したり、スクリプト内の変数に変更を加えたりという事をします。 この通信をあらかじめ済ませてお…

【Vue】Vueインスタンスに初期値を渡す

個々のコンポーネントにバックエンドから初期値を追加する方法は以前記載しました。 blog.websandbag.com 個々のコンポーネントの場合は、props に直接値を設定すれば解決できます。 しかし、コンポーネントの種類に関わらず共通で使いたい値の場合がありま…

【Vue Router】ルートのプロパティの型を変換して取得する

プレーンなVueのプロジェクトでルーティングを行いたい場合、Vue Routerモジュールを使用します。 router.vuejs.org このモジュールでは、静的なURLはもちろん、動的なURLを扱う事ができます。 動的なURLというのは、例えば次のような使い方です。 ユーザー…

【Vue CLI】初期設定のエントリーポイントを変える

Vue CLIで作成したプロジェクトでは、初期設定のエントリーポイントは隠蔽されています。 今回は、初期設定されているエントリーポイントを変える方法について記載します。 環境 モジュール名 バージョン @vue/cli 4.4.6 【Tips】 Vue CLI 4系を使う場合の注…

【Vue】エラー解決備忘録:TypeError: loaderContext.emitError is not a function

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 TypeError: loaderContext.emitError is not a function ソース ハブ…

【Vue】エラー解決備忘録:You are using the runtime-only build of Vue where the template compiler is not available...

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 [Vue warn]: You are using the runtime-only build of Vue where the…

【Vue】コンポーネントのプロパティの初期値にバックエンドから値を代入する

Vueとバックエンドで共通の値を使いたい時があります。 シングルページアプリケーションの様にフロントとAPIで構成する場合は、APIでサーバーサイドとやり取りをすると言う方法が考えつきます。 しかし、設定値のためだけにAPIを使うと言うのは実装するのも…

【Vue】エラー解決備忘録:The "data" option should be a function that returns a per-instance value in component definitions.

Vueでアプリケーションを実装していた時に発生したエラーについて記載します。 状況 ボタンが2個あるページを作成しました。 ボタンが1個だったときはオブジェクトでも動いていたのですが、2個にしたところ次のエラーが発生しました。 The "data" option …

【Vue.js】テンプレート内で静的な画像を読み込む

Vueのコンポーネントを作成する時に、imgタグを使って画像を読み出したい時があります。 動的に画像を指定する前提の場合は、v-bingにパラメータを渡して画像名(画像ファイルのパス)を指定します。 この記事では、静的な画像の指定方法についてまとめます…

©︎2017-2018 WebSandBag