如何在Rails中使用标签助手为select标签添加v-on:change属性

我之前也踩过这个坑，你的问题主要出在对Rails辅助方法参数逻辑和Vue属性传递方式的误解上，让我给你拆解清楚：

为什么你的两种写法都不生效？ #

1. 第一种写法（嵌套在data哈希里）：
   你把v-on:change放在data:哈希中，Rails会自动给这个属性加上data-前缀，最终渲染出来的是data-v-on-change="getWorker()"——这不是Vue能识别的指令格式，自然绑定失败。

2. 第二种写法（参数顺序错误）：
   select_tag的正确参数结构是：select_tag(name, options = nil, html_options = {})，你中间插入的空哈希{}打乱了参数顺序，导致后面的class和事件属性都没被正确解析为HTML属性。

正确的写法 #

直接把Vue的v-on:change（或简写@change）放到select_tag的第三个参数（HTML选项哈希）里即可，不需要嵌套data，也不用拆分参数：

写法1：使用完整的v-on:change指令

<%= select_tag "worker_id", options_from_collection_for_select(@workers, "id", "name"), prompt: 'Choose', class: 'form-control', "v-on:change" => "getWorker()" %>

写法2：使用Vue的简写@change

Vue允许用@替代v-on:，Rails也能正确识别这个属性名，写法更简洁：

<%= select_tag "worker_id", options_from_collection_for_select(@workers, "id", "name"), prompt: 'Choose', class: 'form-control', "@change" => "getWorker()" %>

验证方式 #

页面渲染后，右键查看元素的HTML源码，只要能看到类似下面的代码，就说明属性已经正确添加，Vue就能正常触发getWorker()方法了：

<select name="worker_id" id="worker_id" class="form-control" v-on:change="getWorker()">
  <option value="">Choose</option>
  <!-- 生成的工人选项 -->
</select>

内容的提问来源于stack exchange，提问作者Jepzen