vuejs
課題 追加と編集フォームは同じデータを操作することが多い。そのため、各フォームを異なるコンポーネントとして作成するとほぼ同じ処理をするコンポーネントが2つできることになり、入力チェックやレイアウトの調整に2重のコストがかかる。そのため、追加と…
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>
created と mounted どちらもVuejsが提供するライフサイクルフック。たいていのサンプルでは、このライフサイクルフックのどちらかでAPIアクセスをするが、どんな違いがあるんだろう。 created インスタンスの初期化が済んで props や computed にアクセスで…
vue-tables-2とは サンプルコードについて 表示してみる 実装のポイント リンクを作る 実装のポイント カラムが多いとき データが多いとき カラムごとにフィルタを用意する 実装のポイント カラムごとに表示/非表示を切り替える 実装のポイント グルーピング…
課題 Vuejs利用時に、以下のようにクエリパラメータを一部のみ取り除きたい 検索したらURLにクエリパラメータが付与される ボタンを押したら対応するクエリパラメータだけURLから削除される 検証環境 "dependencies": { "vue": "^2.5.2", "vue-router": "^3.…
課題 Vuejs利用時に、HTTPレスポンスの例外処理を共通化したい。 各画面の各リクエストごとに、例外処理を実装するのは避けたい。 解決方法 HTTPクライアントライブラリのAxiosの、interceptorsの仕組みを利用する。 検証環境 package.json "dependencies": …
環境 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>
<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>
setIntervalとは 一定の遅延間隔を置いて関数を繰り返し実行したいときに利用する関数。 ポーリングで利用することが多い。 参考 setInterval 1秒ごとにコンソール出力する例。 <html lang="ja"> <script> window.setInterval(function(){ console.log("polling"); }, 1000); </script> <body> </body> </html> se…