如何在Rails应用的Vue.js组件中使用Rails助手方法？

嘿，我来帮你搞定在Vue组件里使用Rails助手方法的问题～ 因为Vue是前端运行的JavaScript代码，而Rails助手是后端Ruby代码，没法直接在Vue里调用Ruby方法，不过我们有几种可行的方案，你可以根据场景来选：

方案1：渲染Vue前提前用助手处理数据（最简单直接） #

这种方法适合你只需要在页面加载时就把处理好的数据传给Vue的场景，不需要动态计算。

你可以在Rails的erb视图文件里，把@movies的数据先通过runtime助手处理好，再转成JSON放到dataset里：

# 假设你的视图是app/views/movies/index.html.erb
<div id="movies" data-movies="<%= 
  @movies.map do |movie|
    # 把原始电影数据和处理后的runtime合并
    movie.as_json.merge(formatted_runtime: runtime(movie.runtime))
  end.to_json 
%>">
</div>

然后在你的Vue组件里，直接使用处理好的字段就行，修改app.vue的模板：

<template>
  <ul id="app" class="movies">
    <li v-for="movie in original_movies" class="movie card">
      时长：{{ movie.formatted_runtime }}
      标题：{{ movie.title }}
    </li>
  </ul>
</template>

这样Vue拿到的就是已经格式化好的时长，不需要再做计算，非常高效。

方案2：把助手逻辑封装成API接口（适合动态计算） #

如果你需要在Vue里动态计算时长（比如用户输入一个时长值，实时返回格式化结果），可以把runtime的逻辑做成一个后端API接口，然后Vue通过请求来获取结果。

第一步：添加API路由和控制器方法 #

在routes.rb里加一条路由：

# config/routes.rb
get '/movies/format_runtime', to: 'movies#format_runtime'

然后在movies_controller.rb里实现这个action：

# app/controllers/movies_controller.rb
def format_runtime
  runtime = params[:runtime].to_i
  hours = runtime / 60
  mins = runtime % 60
  render json: { formatted: "#{hours}h #{mins}m" }
end

第二步：在Vue里调用这个接口 #

修改你的app.vue，添加一个异步方法来调用API：

<template>
  <ul id="app" class="movies">
    <li v-for="movie in original_movies" class="movie card">
      <span v-if="movie.runtime">
        时长：{{ getFormattedRuntime(movie.runtime) }}
      </span>
      <span v-else>暂无时长数据</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: ["original_movies"],
  methods: {
    async getFormattedRuntime(runtime) {
      try {
        const response = await fetch(`/movies/format_runtime?runtime=${runtime}`);
        const data = await response.json();
        return data.formatted;
      } catch (error) {
        console.error('格式化时长失败:', error);
        return '未知时长';
      }
    }
  }
}
</script>

这种方案适合需要动态处理数据的场景，但会增加一次HTTP请求，所以如果是静态数据的话，方案1更优。

方案3：把助手逻辑复制到Vue方法里（适合简单逻辑） #

如果runtime的逻辑比较简单，你可以直接在Vue里写一段相同的JavaScript代码，这样不需要和后端交互，性能最好。

修改你的app.vue：

<template>
  <ul id="app" class="movies">
    <li v-for="movie in original_movies" class="movie card">
      时长：{{ runtime(movie.runtime) }}
    </li>
  </ul>
</template>

<script>
export default {
  props: ["original_movies"],
  methods: {
    runtime(runtime) {
      const hours = Math.floor(runtime / 60);
      const mins = runtime % 60;
      return `${hours}h ${mins}m`;
    }
  }
}
</script>

这个方法的缺点是，如果以后Rails助手的逻辑有修改，你需要同步修改Vue里的代码，要注意保持前后端逻辑一致。

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