JavaScriptなどプログラミングに関する投稿をしています。使ってみました!よろしければ、動作させてみてください!v-modelインプットデータをバインディングするディレクティブです。入力ボックスのデータをリアルタイムで同期できます。次はtextareaで複数行入力する場合です。checkboxの場合です。SVGのデータバインディングcircleタグにおいて、中心からの半径を定義してる「r」の値を、DOM操作をしています。スライダーを動かすと”radius”の値と同期してcircleが変化します。v-onv-onディレクティブでは、DOMイベントを受け取ります。次の例ではクリックイベントでメソッドが呼ばれて、アラートが出ます。v-on:clickは@clickに省略できます。メソッドを呼んで、一つ目のセレクトに対して、二つ目のセレクトメニューの中身が変わります。0′′のところで条件分岐しています。v-transitionv-transitionディレクティブは、v-ifやv-showと組み合わせて状態を変化させます。vue.jsのトランジションには「enter」と「leave」の2つのフェーズが有り、DOM追加時にv-enter、削除時にv-leaveのトランジションクラスが付与されます。次の例で使用されているv-enter-activeとv-leave-activeは、トランジション全体となり、追加される時のフェーズはv-enterからv-enter-to、削除される時はv-leaveからv-leave-toのトランジションクラスが付与されます。同じ要素をvi-ifでグループ化する場合、keyを分ける必要があります。参考にさせていただいたのはこちらの書籍です。UI/UXjQueryのselect2を導入することで複数選択可能な、セレクトボックスを簡単に実装することができます。セレクトボックス内の検索も可能なので、項目が多い場合は便利です。“select2-rails”がありましたので、導入いたします。本記事のサンプルデータはintegerのprefecture_codeをenumで用意しています。本記事ではsimple_formを使ってセレクトボックスを作成しています。%>jqueryは以下の記述だけで検索可能なセレクトボックスができます。trueを指定することで複数選択可能になります。%>オプションの設定オプションはこちらを参考に設定することができます。テーマを利用する場合bootstrapを使用している場合はテーマを使うことができます。modalを使うことで使い勝手の良いモーダルウィンドウを作ることができます。背景のオーバーレイをクリックすると、モーダルウィンドウを閉じれるのもうれしいです。あとは好みによりますが、本記事ではfont-awesomeも設置しています。必要なgemはこちらです。bootstrap3を使っていますが、bootstrap4でも大丈夫です。"bootstrap";Viewsviewはこのままでも、モーダルウィンドウは適用されています。%>オプションの設定あとはドキュメントにもあるようにオプションを設定していきます。本記事ではfont-awesomeも設置して、スタイルシートで調整しています。%>スタイルシート今回追加したスタイルシートを載せておきます。シンプルにするためにtitle部分をdisplay:noneにしています。コメントを残すFlashメッセージはブラウザをリロードすれば消えますが、メッセージ横に×ボタンを設置してクリックしたらcloseできるようにしました。アラートはBootstrap3のalert-infoとalert-dangerを使用して、若干cssを追加しています。レイアウトにアラートを設置するレイアウト毎に共通して同じアラートを使う場合ですが、レイアウトのヘッダーの下部にアラートのパーシャルを読み込むようにしました。%></body></html>テンプレートの方は次の通りです。noticeかalertかで分岐しています。×ボタンはHTML-特殊文字を使用しています。%>スタイルシート一応、今回加えたcssも載せておきます。