javascript

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 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>

jQueryのajaxメソッドでHTTPリダイレクト(ステータスコード302)を受け取った時は、リダイレクト先の結果しかdone(),fail()メソッドに渡せない

springsecurity使うときにこの挙動がわかってなくて困ったのでメモ。タイトル長っ。 どんな内容? jQueryのajax関数内でリスエストを送った結果がHTTPリダイレクト(ステータスコード 302) だった場合、jQueryのdone(),fail()メソッドがコールされる前にブラウ…