要旨 Vue.js は、サーバー側で生成された HTML 文書の一部をテンプレートとして利用できる。 HTML フォームに含まれるフォーム要素(input 要素、textarea 要素、select 要素等)に v-model 属性を指定すれば、フォームへの入力と Vue コンポーネントのデータが結び付けられる。 しかし、Vue.js はそれらの要素の value, checked または selected 属性の初期値を無視する。 そこで、私はそれらの値を拾い上げて Vue コンポーネントのデータを初期化するプラグインを作成した。 また、私はフォーム要素に設定された name 属性の値から適宜 v-model 属性に値をセットするように拡張されたフォームビルダーを作成し、Gem パッケージとして公開した。 背景 Rails のフォームビルダーで HTML フォームを生成し、jQuery
![Railsのフォームビルダーで生成したform要素をVueコンポーネント化する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/76f45d89fa26de879f11667903733648959a5f9f/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9UmFpbHMlRTMlODElQUUlRTMlODMlOTUlRTMlODIlQTklRTMlODMlQkMlRTMlODMlQTAlRTMlODMlOTMlRTMlODMlQUIlRTMlODMlODAlRTMlODMlQkMlRTMlODElQTclRTclOTQlOUYlRTYlODglOTAlRTMlODElOTclRTMlODElOUZmb3JtJUU4JUE2JTgxJUU3JUI0JUEwJUUzJTgyJTkyVnVlJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTlEJUUzJTgzJUJDJUUzJTgzJThEJUUzJTgzJUIzJUUzJTgzJTg4JUU1JThDJTk2JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xODRiMzVlNDI3ZTM2NjEyYmQxMWJjZDUxYWFjMWI4OA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa3Vyb2RhJTQwZ2l0aHViJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yYWM0YTFlOGJiMWZjNzlhYTdiM2I4NDUzYmYzZWEwNA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D52caa3c14d1b74aa5c14320cc4118891)