Vue Router で画面遷移時のスクロール位置制御 | Code Kneading
# Vue Router で画面遷移時のスクロール位置制御 # 概要 ブラウザバック時にスクロール位置が期待した通りにならなかった 公式リファレンスに書いてある内容で解決できた スクロールの振る舞い # デフォルトの場合 縦方向に長いページが2つある場合の話です。 例えば、アイテムの一覧画面/listと各アイテムの詳細画面/list/:idみたいな構成としましょう。 一覧画面のリンクから詳細画面へ遷移することができます。 一覧画面で下方向にスクロールした状態で画面遷移すると、詳細画面もスクロールされた状態で表示されます。 これは、なんか気持ち悪いですね😕 詳細画面でスクロールした状態でブラウザバックした場合は、どうでしょう。 この場合は、一覧画面が先頭位置で表示されます。 # 画面遷移後は先頭位置で表示してほしい 一覧画面から詳細画面へ遷移した場合は、先頭位置で表示してほしいです。 そん
vue-router ページ遷移時にアニメーションスクロールをする
vue-routerでページ遷移するときにスクロールの位置をトップ（一番上）に移動させたいとき、公式サンプルにしたがって以下のように実装します。 const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }; // トップに移動 } }) JavaScript ページの先頭までアニメーションスクロールをするで紹介したように、スクロールをアニメーションで移動させたいときは別の方法で実装する必要があります。 routerの値をwatchして、変更されたタイミングでスクロールの処理を実行します。scrollToファンクションはJavaScript ページの先頭までアニメーションスクロールをするで紹介しています。
VuetifyでSelectタグを使う時の注意点 | Takumon Blog
なにこれ 最近Vue.jsのマテリアルデザインのUIフレームワーク「Vuetify」を使っています。 とても便利で、管理アプリのようにデザインにこだわる必要がなければ、CSSをほとんど書かずに済むくらいコンポーネントが充実しています。 ただSelectタグでlabelとvalueを出しわける際に初期値を設定する場合は少しだけ注意点があるので、この記事ではそちらを紹介します。 return-objectを使いましょう Selectタグでlabelとvalueを出しわけるときに初期値を設定する場合、v-modelで設定します。 以下のような実装です。 <template> <div> {{ selectedPlan }} <v-select v-model="selectedPlan" item-text="label" item-value="value" :items="plans" la
[Vue]v-ifに特定のメソッドを連動させたい場合、v-onがとても手軽な件 - Qiita
いきなりサンプル See the Pen [Vue]v-ifのメソッドを連動させる by riotam (@riotam4) on CodePen. サンプルの使い方 入力欄に「b」「y」「r」のいずれかを入力したら、下の文字が非同期的に変わります。 「r」を入力した場合だけ、メソッドが発火してalertがでます。 ポイント 当初は、dataのstateをwatchフックで監視して、変更のたびにif分岐させる必要があるかと考えていました。 しかし、サンプルの通り、v-ifのあるタグ内にそのままv-on="メソッド名"とすれば、v-ifがtrueのときに勝手に発火してくれます。 最後に v-ifとv-onの使い方として、あまりいい方法ではないのかもしれませんが、とりあえず方法との１つとして共有させて頂きます。 何かご意見等ありましたら、ご連絡いただけると嬉しいです。 最後まで、ありがとうござ
![[Vue]v-ifに特定のメソッドを連動させたい場合、v-onがとても手軽な件 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e3b7acbf96179311c24465beb3c63775e634040/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlJTVEdi1pZiVFMyU4MSVBQiVFNyU4OSVCOSVFNSVBRSU5QSVFMyU4MSVBRSVFMyU4MyVBMSVFMyU4MiVCRCVFMyU4MyU4MyVFMyU4MyU4OSVFMyU4MiU5MiVFOSU4MCVBMyVFNSU4QiU5NSVFMyU4MSU5NSVFMyU4MSU5QiVFMyU4MSU5RiVFMyU4MSU4NCVFNSVBMCVCNCVFNSU5MCU4OCVFMyU4MCU4MXYtb24lRTMlODElOEMlRTMlODElQTglRTMlODElQTYlRTMlODIlODIlRTYlODklOEIlRTglQkIlQkQlRTMlODElQUElRTQlQkIlQjYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTFlYjUzMTY1ZmE1ZmU1YzBmNmI4MTBkNzZjODE2YmQy%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBwb25fbWFlZGEmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTVjMDA4N2UxOTAzODNjNWMzNjY5NjFiNTA4YmY2OGZh%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dddff4352f6645fccbef02747081d7604)
v-dialogの再び開いたダイアログのスクロール位置を初期値に戻す - Qiita
概要 Vuetify でスクロールのある大きめなダイアログを v-dialog で実装している場合。 ダイアログを開いてスクロールする ダイアログを閉じる またダイアログを開く とすると、2回目のダイアログのスクロールがTopに戻っておらず、1回目に開いたときのスクロール位置を保持したままになってしまいます。 ※ Vuetify は v1.5 の場合です 解決方法 issueにあった解決策を参考に実装を行いました。ダイアログが Active になると v-dialog--active class がついた div タグができるので、それの scrollTop を 0 にするとスクロール位置が元に戻りました。ダイアログが Active になったタイミングで scrollTop = 0 をする必要があるので、 updated() を利用しました。 Dialog scroll position
Vue.jsを使い始めてハマったポイント - Qiita
はじめに Vue.jsとElementUIを初めて使用してハマったポイントを書きました。 「v-bind」は「：」に、 「v-on」は「＠」に省略できる 公式サイト：https://jp.vuejs.org/v2/guide/syntax.html#%E7%9C%81%E7%95%A5%E8%A8%98%E6%B3%95 （例）ボタンの場合 <!-- 完全な構文 --> <el-button v-on:click="onClickSubmitButton">登録する</el-button> <!-- 省略記法 --> <el-button @click="onClickSubmitButton">登録する</el-button> ：（コロン）の付け忘れに注意！ （例）ボタンにdisabled属性を設定した場合 ElementUIが提供している<el-button>タグは、disabled属
vue.js モーダルウィンドウ実装でコンポーネント理解 | アールエフェクト
モーダルウィンドウとは ある要素をクリックすると画面中央にウィンドウが表示され、表示されたウィンドウ以外の背景を薄暗く表示させることでユーザに表示させたいウィンドウの内容を際立たせるための通知などに利用される技術です。通知以外にもシンプルページアプリケーションなどではモーダルウィンドウを入力フォームとしても利用します。Webの世界ではさまざまな場所で利用されているので、モーダルウィンドウという言葉を知らない人でもこの技術に触れたことのない人はいないでしょう。英語ではmodalという単語を使うので検索する場合はmodalと検索することで情報を見つけることができます。 自分でモーダルウィンドウを作ろう モーダルウィンドウの作成方法はネット上に溢れていますが、CSSの設定の箇所がわかりにくいために挫折してしまう人もいるのではないでしょうか。自作での作成を諦めてしまわないようにできるだけシンプルな
Vue.js｜Formで送信させない(@submit.prevent) - わくわくBank
preventイベント修飾子の動作確認をします。@submit.prevent を利用すると、Formの送信前にバリデーション処理を入れるなどの活用ができます。 「@submit.prevent」 について <form @submit.prevent action="/" method="POST"> <button type="submit">送信</button> </form> @submit.prevent を利用すると preventDefaultメソッド が実行されて、ブラウザ本来の挙動(formによる送信)が停止されます。 preventDefaultメソッドについて こちら で取り上げています。 動作確認 下記パターンで動作確認してみます。 ボタン1 @submit="onSubmit1" なので送信されます。 ボタン2 @submit.prevent="onSubmit1
Vue.jsでシンプルな入力文字種制限 - Qiita
要件そのものにどうも納得がいかなかいが世の中似たような事求められることもありそうだからメモ。 要件 フロントエンドでリアルタイムに入力項目にバリデートをかけたい 条件外の入力文字列はそもそも入力できないようにしたい フレームワークはVue.js 検討 とりあえずはpatternが使えそう (2)が無ければinputのpatternに正規表現を入れてイチイチformタグで囲って入力毎にsubmitしてやれば大体イケそうだが vue-validator使えば多分イケるだろうけどこの程度のことに導入したくない 現時点での結論: <template> <main id="app"><main id="app"> <h1>Vueでシンプルな入力制限</h1> <table> <tbody> <tr> <th>数字のみ:</th><td><input type="text" pattern="^[0-
Vue.js入門その７〜セレクトボックスを動的に変更してみる〜 | RE:ENGINES
はじめに こんにちは、naoki85です。 今回はよくあるパターンですが、1つめのセレクトボックスを選択したら、次のセレクトボックスの項目を変えてみます。 サンプル 実際のサンプルはこちらです。 良い例が思いつかなかったので、このブログのカテゴリとタグを例にしてみました（笑） とりあえず作ってみる まずはソースコードを載せ、その後、説明を入れたいと思います。 ソースコード <div id="app"> <!-- Categories --> <label for="category">Category</label> <select name="category" v-model="selectedCategory" v-on:change="fetchTags"> <option v-for="category in categories" v-bind:value="category.
vue-routerでページ遷移を検知して、GAのpageviewを送信する - Qiita
合同会社kumanoteのTanakaです。 vue-router使用時にページ遷移を検知して、Google AnalyticsのBeaconを飛ばす実装の紹介になります。 ページ遷移の検知 $routeという変数をwatchすることで、ページ遷移を検知することができます。 単一のrouter-viewを使っている場合は、一箇所実装することで 全てのページ遷移に反応して、処理を行うことができます。 （※ 複数のrouter-viewを使っている場合は別の作り込みが必要になります。） 具体的には以下のような感じになります。 <template> <router-view></router-view> </template> <script> export default { watch: { '$route': function (to, from) { if (to.path !== fr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue2.0とnl2br - Qiita
[Vue] Radio ボタンの初期値にチェックを入れる方法（サンプルあり） - Qiita
Vue + vue-router で動的にページタイトルを変更する方法 - Qiita
