Rails Vuejs Webpacker：传递实例变量数据

Question

我正在尝试学习如何使用通过Webpacker gem生成的带有Vuejs的Rails 5.1构建应用程序。

$ rails new myvueapp --webpack=vue

我如何在Vue组件之间来回传递实例变量数据，以使我的数据进入/离开数据库？

例如，假设我有一个带有用户名和电子邮件字段的用户模型。是否有一个简单的示例，说明如何将实例变量@user数据从控制器传递到组件？

我相信有两种方法可以做到这一点：

（1）在控制器中，render :json => @user先使用，然后使用诸如访存API或Axios之类的东西来检索.vue组件中的数据。

-要么-

（2）使用类似的例子<%= javascript_pack_tag 'hello_vue' %>有一起<%= content_tag ... %>在一个视图。

当我做这个<%= javascript_pack_tag 'hello_vue' %>例子时，我可以看到“ Hello Vue！” 从组件“ message”变量中的数据中获取数据，但是很难找到实例变量数据的示例，例如：@user数据，它们传入和传出Rails。

如何传递@user数据的任何示例将不胜感激。

谢谢。

Answer 1

我不是 100% 确定你想要完成什么，但我可以想出两种方法来做到这一点。

1. v-model在表格上使用。无论检索或更新什么值，都将立即在您的 Vue 实例中可用。（例如<%= f.input :username, input_html: { 'v-model': 'username' } %>

2. 使用数据属性。假设您有一个带有@user变量的控制器。

然后在你看来，你可以做类似的事情（这可能不是 100% 正确，因为它只是来自记忆）：

<% simple_form_for @user do |f| %>
  <%= f.input :username, input_html: { id: 'user_username', data: { username: @user.username } } %>
  <%= f.input :email, input_html: { id: 'user_email', data: { email: @user.email } } %>
<% end %>

然后您可以使用 JavaScript 来访问数据属性。在这些示例中，由于两者都是表单，因此最好使用v-model，但您可以将数据属性用于非表单内容。例如，我经常使用 AJAX 请求中使用的 URI 的数据属性，这些属性可能因测试站点和生产站点等而异。