(続・テーブル表示編)Tech開発Divのeciです。社内にも徐々にVueを始めるメンバーが増えてきました。私より詳しくなるメンバーが出たら色々教えてもらおうと密かに狙っています。本題ですが、前回からの続きからとなります。今回のやることPagenationを入れてみるダイアログを表示してみるメッセージを表示してみる下準備まずはデータを少し増やしておきましょう。index.vueのitemsを↓のように書き換えます。}</script>Pagenation編ここからが本番です。データが増えて、そろそろPagenationが欲しくなってきましたので、入れましょう。/></nav>いかがでしょうか?これでPagenationが表示されたと思います。ここまでのソースはこんな感じになっています。}</script>削除用リンクと確認ダイアログ編データを一覧からサクサク削除したい時もあると思います。削除リンクをクリックしたらサクッと削除できるようにしてみましょう。削除リンク用のカラム定義をb-tableの一番後ろに追加します。</template>ダイアログの定義を追加templateの下の方にこっそり追加します。ダイアログ表示メソッドの追加ダイアログ表示用メソッドとOKボタンを押された時に呼び出されるメソッドも追加します。ここまでで、削除リンクをクリックして、ダイアログで「OK」を押すと、該当の行が削除されると思います。ここまでのソースはこんな感じになっています。削除が正常に行われたのに、何のメッセージがないのは不親切です。正常終了時は何も返さないUNIX文化は素敵ですが、Web画面でそれを主張したら「こいつ実装が面倒くさいだけじゃねーか?」と疑われますので、ここは素直にメッセージ表示しましょう。メッセージ表示メソッドの呼び出しを追加delメソッドに以下を追加します。this.showInfo("削除できました。")いかがでしょうか?削除されると同時に、メッセージが表示されるようになったと思います。最終的なソースはこんな感じになっています。this.showInfo("削除できました。}</script>まとめダイアログのアニメーションとかいいですね!メッセージ表示周りはちょっと面倒なので、もっといい方法があったら試してみたいと思います。(続・テーブル表示編)Tweet関連記事2018-05-29Gitで複数の修正を同時進行で行いたい場合に使えるGitコマンド開発Divの藤原です。レビュー待ちの間に、次の修正をしたい。(導入からテーブル表示編)開発Divのeciです。月別アーカイブ検索スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。