RailsアプリにVue.jsを組み込む形で実装する場合、Viewの部分がややこしくなることが多い。

今回の件は遭遇する可能性は低いけど、その分忘れやすそうなので残しておく。

テンプレートエンジンはHaml。

やったこと

RailsのFormヘルパーを使って書かれていたselectがあった。

= f.select :type,
  [["hoge label", "hoge"],["fuga label", "fuga"]],
  {prompt: "選択してね"}, class: 'form-control'

これのoptionをVue側で管理するように変更して、ユーザーの操作に合わせてoptionを切り替える形にしたい。

最終的にできたコードがこんな感じ。

= f.select(:type, nil, {prompt: "選択してね"}, {class: 'form-control'}) do
  %option{"v-for": "option in options", ":value": "option.value"}
    {{ option.label }}

以下、少し困った部分をまとめた。

最後にdoが必要

doを書かずに実行すると次のようなエラーが発生した。

syntax error, unexpected keyword_ensure, expecting end-of-input

変更前はOptionを引数に渡すだけだったけど、変更後はselectの下にoptionを書く形なので、doが必要。

最初どこがダメなのか分からなかったので、エラーメッセージごとググってみたらあった。

Haml記法でunexpected keyword_ensure, expecting end-of-inputのsyntax errorが出た時

今後はHamlで同じメッセージを見たら、まずdoが抜けてないか確認する。

selectの引数に注意

次のコードではpromptもclassも反映されない。

= f.select(:type, {prompt: "選択してね"}, {class: 'form-control'}) do
  %option{"v-for": "option in options", ":value": "option.value"}
    {{ option.label }}

ActionView::Helpers::FormBuilderを見てみる

Railsの対象メソッドを覗いてみると、次のようになっている。

def select(method, choices = nil, options = {}, html_options = {}, &block)

というわけで、selectの第2引数以降は

  • 第2引数: optionタグの要素配列
  • 第3引数: include_blank / prompt
  • 第4引数: HTMLのオプション

という感じになる。

第3引数に関してはコードは以下を参照。

Can't add class on select form helper in Rails 4

第2引数にnilを指定

今回の場合は第2引数に入るはずのoption配列はdoの後に書くので、第2引数にはnilを指定してあげて、第3引数にはpromptを、第4引数にはclassを書くことで解決した。

= f.select(:type, nil, {prompt: "選択してね"}, {class: 'form-control'}) do