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

我正在尝试学习如何通过Rails 5.1与Vuejs一起构建应用程序，如通过Webpacker gem生成的。Rails Vuejs Webpacker：传递实例变量数据

$ rails new myvueapp --webpack=vue

如何在Vue组件之间传回实例变量数据以将数据导入/导出数据库？

比方说，我有一个带有用户名和电子邮件字段的用户模型。有没有一个简单的例子来说明如何将控制器中的实例变量@user，data传递给组件？

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

（1）在控制器方面，具有render :json => @user，然后使用类似的获取API或Axios公司在.vue组件来检索数据。

- 或 -

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

当我这样做<%= javascript_pack_tag 'hello_vue' %>的例子，我可以看到“你好Vue！”来自组件“消息”变量中的数据，但无法找到实例变量数据的示例，例如：@user数据，被传入和传出Rails。

任何如何通过@user数据的例子将不胜感激。

谢谢。

来源

2017-07-27 Kobi

在Vue组件之间传递？ https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch或查看Vuex的复杂状态管理。使用类似axios和标准rails api的httpclient在Vue前端和Rails后端之间传递。 – ytbryan

谢谢，但不是我在找什么。我不想在Vue组件之间传递数据。我正在寻找从Rails数据库（通过模型和控制器）管理数据到Vue组件，现在已经集成到Rails中。 – Kobi

我不是100％确定你要完成什么，但我可以想到两种方法来完成这个任务。

在窗体上使用v-model。无论检索或更新什么值都会立即在您的Vue实例中使用。（如<%= f.input :username, input_html: { 'v-model': 'username' } %>
使用的数据属性。比方说你有，有一个@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的数据属性，这可能与测试站点到生产站点等不同。

来源

2017-08-21 16:54:20 Trinculo

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

回答

相关问题