しおしお

IntelliJ IDEAのことなんかを書いてます

Vue.js

Vue.js3でのv-modelのメモ

Vue.jsのバージョン3では、v-modelの仕様が結構変わっているのでそれのメモ。 サンプルコード シンプルなパターン modelValueプロパティを使った値の受け渡しになっていて、値の変更は、update:modelValueイベントを発火することで親コンポーネントに通知で…

single-spaでマイクロフロントエンドしてみる

single-spa | single-spaなるマイクロフロントエンドさくっと作れそうなフレームワークを試してみました。 準備 single-spa はプロジェクト作成用などのcliを用意してくれているようなので、まずはそれをインストールします。 npm install --global create-s…

VueRouterでroute変更時にaxiosで実行中のリクエストをすべてキャンセルする

やりたいこと VueRouterでroute変更時に、前のページで投げられていたリクエストを一括でキャンセルしたい。 これが出来ると、遷移前のページで大量にリクエストが投げられていた場合、遷移後のページのcreatedで実行するリクエストがすぐに実行出来るように…

Vue.jsのrouteパラメータを$router.paramsではなくpropsで受け取る

やりたいこと routeパラメータを、コンポーネント側で$router.paramsを使って取り出すのではなく、propsに代入してもらいコンポーネントはvue-routerに依存しないようにする。 お試しコード ルート定義 ルート定義する際に、 props: true を追加してあげます…

Vue.jsでC3.jsを使ってドーナツチャートを表示してみる

Vue.jsなアプリケーションでドーナツチャートを表示する必要があったので、C3.jsを試してみたよ。 ドーナツチャートを表示するコンポーネントの作成 C3.jsを使ってドーナツチャートを表示するためのコンポーネントを作ります。 とりあえず、ファイル名をDonu…

WebStormでVue.jsなアプリケーションをデバッグする

npm run devしたVue.jsなアプリケーションをIntelliJ IDEA(WebStorm)でデバッグする的な話を社内のIntelliJ IDEA勉強会でしたら盛り上がったのでブログにも手順を残しておく。*1 アプリケーションを起動する npm run devで起動してあげましょう。 こんな感じ…

VeeValidateで入力値のバリデーションをしてみる

VeeValidateのインストール 現時点の最新版は、2.1.3になります。 npm install vee-validate --save VeeValidateをVueに追加する import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate); 入力フォームにバリデーションルー…