vue
フロントエンドで初期データを外部APIから取得したい場合があります。 データ通信はajax を用いるのは一般的です。 ajaxでデータを取得して画面内の要素を更新したり、スクリプト内の変数に変更を加えたりという事をします。 この通信をあらかじめ済ませてお…
個々のコンポーネントにバックエンドから初期値を追加する方法は以前記載しました。 blog.websandbag.com 個々のコンポーネントの場合は、props に直接値を設定すれば解決できます。 しかし、コンポーネントの種類に関わらず共通で使いたい値の場合がありま…
プレーンなVueのプロジェクトでルーティングを行いたい場合、Vue Routerモジュールを使用します。 router.vuejs.org このモジュールでは、静的なURLはもちろん、動的なURLを扱う事ができます。 動的なURLというのは、例えば次のような使い方です。 ユーザー…
Vue CLIで作成したプロジェクトでは、初期設定のエントリーポイントは隠蔽されています。 今回は、初期設定されているエントリーポイントを変える方法について記載します。 環境 モジュール名 バージョン @vue/cli 4.4.6 【Tips】 Vue CLI 4系を使う場合の注…
webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 TypeError: loaderContext.emitError is not a function ソース ハブ…
webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 [Vue warn]: You are using the runtime-only build of Vue where the…
Vueとバックエンドで共通の値を使いたい時があります。 シングルページアプリケーションの様にフロントとAPIで構成する場合は、APIでサーバーサイドとやり取りをすると言う方法が考えつきます。 しかし、設定値のためだけにAPIを使うと言うのは実装するのも…
Vueでアプリケーションを実装していた時に発生したエラーについて記載します。 状況 ボタンが2個あるページを作成しました。 ボタンが1個だったときはオブジェクトでも動いていたのですが、2個にしたところ次のエラーが発生しました。 The "data" option …
Vueのコンポーネントを作成する時に、imgタグを使って画像を読み出したい時があります。 動的に画像を指定する前提の場合は、v-bingにパラメータを渡して画像名(画像ファイルのパス)を指定します。 この記事では、静的な画像の指定方法についてまとめます…