Question

我的Rails应用程序中有以下选择框：

<div id="vue-element">
  <strong><%= f.label :property_type %></strong><br>
  <%= f.select(:property_type, options_for_select(@types.map {|type| [type.titleize, type]}, listing.property_type), {'v-model': 'propertyType'}) %>
</div>

但是当我尝试在同一页面上显示propertyType的内容时，Vue不会呈现所选的条目：

{{ propertyType }}

这就是我实例化vue的方式。

new Vue({
  el: '#vue-element',
  data: {
    propertyType: undefined
  }
})

知道为什么会这样或者我如何调试这个？提前谢谢！

修复：

我错过了一组空花括号：

<%= f.select(:property_type, options_for_select(@types.map {|type| [type.titleize, type]}, listing.property_type), {}, {'v-model': 'propertyType'}) %>

Answer 1

根据评论和您自己的修正进行总结，并提供一些可能对将来的用户有所帮助的其他信息。

确认HTML中是否存在v-model
- 查看源代码
- 请勿使用开发工具检查元素，因为这不会显示v-model
如果v-model不在源中，则select方法的格式很可能有问题
- 格式：select(method, choices = nil, options = {}, html_options = {}, &block) API docs
- 由于options和html_options都接受哈希，因此明确地包含两者都更安全，因此Ruby知道如何解析它（即使这意味着包括一个空哈希）。

### Correct examples

# multi-line format for readability
# select(
#  method, 
#  choices = nil, 
#  options = {}, 
#  html_options = {}
# )

# no `options` provided, but explicit empty `options` hash '{}' ('The fix' in the original post)
<%= f.select(
  :property_type, # method
  options_for_select(@types.map {|type| [type.titleize, type]}, listing.property_type), # choices
  {}, # options
  {'v-model': 'propertyType'} # html_options
) %>

# with `options` values
<%= f.select(
  :property_type, # method
  options_for_select(@types.map {|type| [type.titleize, type]}, listing.property_type), #choices
  {include_blank: 'Select your type...'}, # options
  {'v-model': 'propertyType'} # html_options
) %>

Vue.js不会在Rails应用程序中保留选择框信息

1 个答案: