vuejs

Vuejs 追加と編集フォームを共通化する

課題 追加と編集フォームは同じデータを操作することが多い。そのため、各フォームを異なるコンポーネントとして作成するとほぼ同じ処理をするコンポーネントが2つできることになり、入力チェックやレイアウトの調整に2重のコストがかかる。そのため、追加と…

Vuejs formをサブミットするときのポイント

SPAの場合はformタグに任せてデータをサブミットすることは稀で、通常は自身で定義したハンドラを呼び出してAjax通信を行うことが多い。 課題 以下のように<button type="submit" @click="exec">を使ってボタン押下時のハンドラを実行するのは危ない。 <template> <form> <input type="text" placeholder="username" /> <input type="text" placeholder="password" /> <button type="submit" @click="exec">submit</button></form></template></button>

Vuejs APIアクセスはcreatedとmountedのどちらで行う?

created と mounted どちらもVuejsが提供するライフサイクルフック。たいていのサンプルでは、このライフサイクルフックのどちらかでAPIアクセスをするが、どんな違いがあるんだろう。 created インスタンスの初期化が済んで props や computed にアクセスで…

Vuejs vue-tables-2 でテーブル表示

vue-tables-2とは サンプルコードについて 表示してみる 実装のポイント リンクを作る 実装のポイント カラムが多いとき データが多いとき カラムごとにフィルタを用意する 実装のポイント カラムごとに表示/非表示を切り替える 実装のポイント グルーピング…

Vuejs vue-router クエリパラメータの一部だけを取り除く

課題 Vuejs利用時に、以下のようにクエリパラメータを一部のみ取り除きたい 検索したらURLにクエリパラメータが付与される ボタンを押したら対応するクエリパラメータだけURLから削除される 検証環境 "dependencies": { "vue": "^2.5.2", "vue-router": "^3.…

Vuejs Axiosで共通的な例外をあつかう

課題 Vuejs利用時に、HTTPレスポンスの例外処理を共通化したい。 各画面の各リクエストごとに、例外処理を実装するのは避けたい。 解決方法 HTTPクライアントライブラリのAxiosの、interceptorsの仕組みを利用する。 検証環境 package.json "dependencies": …

Vuejs vue-router利用時にはアクティブなリンクに自動でクラスを振ってくれる

環境 package.json "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" }, 課題 vue-router利用時に、アクティブなリンクにcssのスタイルを適用したい。 このとき、Vuejsだけの知識で解決しようとすると、以下のように書ける。 <template> <div> <ul> <li :class="{ active : this.$route.path.match(/articles\/stark/) }"> </li></ul></div></template>

Vuejs <button type="reset"> の併用はアブナイ

<button type="reset">とは? HTMLのButtonのひとつで、Formを自動でクリアできる。 参考: button 要素 - HTML | MDN <html> <body> <form> <input type="text" placeholder="username" /> <input type="password" placeholder="password" /> <button type="reset">reset</button> </form> </body> </html> resetボタンをクリックするとFormが自動で…</button>

Vuejs ポーリングする時の注意点

setIntervalとは 一定の遅延間隔を置いて関数を繰り返し実行したいときに利用する関数。 ポーリングで利用することが多い。 参考 setInterval 1秒ごとにコンソール出力する例。 <html lang="ja"> <script> window.setInterval(function(){ console.log("polling"); }, 1000); </script> <body> </body> </html> se…