Question

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

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

如何定义一个Vue SFC但又不会失去我们在Rails模板（PUT / PATCH和真实性令牌的隐藏字段）中提供的所有良好的Rails功能？

谢谢！

Answer 1

有很多方法可以解决这个问题。如今，许多人正在使用名为webpacker的gem。如今，它实际上已经出现了。

我首先会在官方文档中阅读webpacker以获得对它的了解。然后查看一些有关如何将Vue与之配合使用的信息。 Google进行了快速搜索，发现this似乎完全满足您的需求。

关于使用form_for，您可以：

使用专用的宝石：https://github.com/kuroda/vue-rails-form-builder
使用form_with，因为form_for已过时。然后，只需将类似@submit.prevent="submitMessage"的内容添加到:html的{{1}}字段中，然后将一个方法添加到名为form_for的组件中。然后，您将可以访问submitMessage的所有奇特部分，例如该方法中的真实性令牌。 More info在这里。

Answer 2

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

对于在.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后端发出请求，该设备现在将具有CSRF令牌以确保Rails的真实性。 Rails将从请求中返回JSON，而Vue将适当处理。

我正在使用Rails6。整个过程应该是

使用Rails和Vue设置项目
在package.yml中安装axios和vue-axios
使用上面的代码使用X-CSRF-Token标头设置axios默认值。

我附加的链接也有更详细的说明。再次适用于想要使用Rails作为后端并将Vue作为前端并尽可能将它们分开的任何人。

使用Vue组件创建Rails表单

2 个答案: