ruby-on-rails - 使用 Vue 组件创建 Rails 表单

Question

我想知道使用 Vue SFC(单文件组件)创建 Rails 表单的最佳方法是什么。

当使用 form_for 方法时，如果我们通过 PUT 提交，Rails 会生成一些隐藏的输入字段，例如真实性 token 和提交方法> 或 PATCH 而不是 POST。但是，如果我将表单提取到 Vue 模板中，我将失去所有这些不错的功能。

如何在定义 Vue SFC 的同时又不失去我们在 Rails 模板中提供的所有良好 Rails 功能(PUT/PATCH 和真实性 token 的隐藏字段)？

提前致谢!

Answer 1

经过广泛的研究，我希望能够回答这个问题。

对于在 .vue 文件中创建的表单，您需要 Axios 并在 Vue 应用程序中配置它。我的引用是 here

特别是

import TurbolinksAdapter from 'vue-turbolinks';

document.addEventListener('turbolinks:load', () => {
  // This code will setup headers of X-CSRF-Token that it grabs from rails generated token in meta tag.
  axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

  new Vue({
    ...
    mixin: [TurbolinksAdapter],
    ...
  })
})

本质上，如果您像我一样，更多地将 Rails 用作 API 服务，而 Vue 将成为为用户运行的前端应用程序。我想尽可能地让 Ruby 远离前端。这是因为似乎没有办法让 ERB 与 Vue 一起使用。我试过添加扩展名 .vue.erb 但 ERB 是按字面意思解析的。然后 Vue 将通过 axios 向我的 Rails 后端发出请求，它现在将具有用于 Rails 真实性的 CSRF token 。 Rails 将从请求中返回 JSON，Vue 将进行适当处理。

我正在使用 Rails 6。整个过程将是

1. 使用 Rails 和 Vue 设置项目
2. 在package.yml中安装axios和vue-axios
3. 使用上面的代码通过 X-CSRF-Token header 设置 axios 默认值。

我附上的链接也有更详细的介绍。同样，这适用于任何想要使用 Rails 作为后端和 Vue 作为前端并尽可能将它们分开的人。