ruby-on-rails – Rails Vuejs Webpacker：传递实例变量数据
|
我正在尝试学习如何使用带有Vuejs的Rails 5.1构建应用程序,这是通过Webpacker gem生成的.
$rails new myvueapp --webpack=vue 如何在Vue组件之间传递实例变量数据,以便将数据输入/输出数据库？ 比方说,我有一个带有用户名和电子邮件字段的用户模型.是否有一个简单的例子说明如何将实例变量@user,数据从控制器传递给组件？ 我相信有两种方法可以做到这一点： (1)在控制器中,有渲染：json => @user然后使用fetch API或Axios之类的东西来检索.vue组件中的数据. -要么- (2)使用类似示例的内容<％= javascript_pack_tag'hello_vue'％>与<％= content_tag ...％>一起使用在一个视图中. 当我这样做时<％= javascript_pack_tag'hello_vue'％>例如,我可以看到“Hello Vue！”来自组件“message”变量中的数据,但是我无法找到实例变量数据的示例,例如：@user数据,传入和传出Rails. 任何有关如何传递@user数据的示例都将非常感激. 谢谢. 解决方法
我不是百分百肯定你想要完成什么,但我可以想到两种方法来做到这一点.
>在表单上使用v-model.无论检索或更新任何值,都可以立即在Vue实例中使用. (例如<％= f.input：username,input_html：{'v-model'：'username'}％> 然后在你看来,你可以做类似的事情(这可能不是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的数据属性,这些URI可能因测试站点而异. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |