Rails Vuejs Webpacker：インスタンス変数データを渡す

Question

Webpacker gemで生成されたVuejsを使用してRails 5.1でアプリケーションを構築する方法を学びたいと思っています。

$ rails new myvueapp --webpack=vue 

データベースのデータを入出力するために、インスタンス変数データをVueコンポーネント間でやり取りするにはどうすればよいですか？

たとえば、ユーザー名と電子メールフィールドを持つユーザーモデルがあるとします。インスタンス変数、@user、データをコントローラからコンポーネントに渡す方法の簡単な例はありますか？私はこれを行うには二つの方法があると信じて

：

（1）コントローラでは、render :json => @user、その後.vueコンポーネントにデータを取得するためにフェッチAPIまたはAxiosのようなものを使用しています。

- または -

は（2）ビューに<%= content_tag ... %>と一緒例<%= javascript_pack_tag 'hello_vue' %>のようなものを使用してください。

これを行うと、<%= javascript_pack_tag 'hello_vue' %>の例では、「Hello Vue！」という文字が表示されます。コンポーネントの "message"変数のデータから、インスタンス変数データの例を見つけるのが難しいです。たとえば、@userデータは、Railsに渡され、Railsから渡されます。

どのように@userデータを渡すかの例は非常に高く評価されます。

ありがとうございます。

Answer 1

あなたが達成しようとしていることを100％確信しているわけではありませんが、私はこれを行う2つの方法を考えることができます。

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 %> 

その後、あなたは両方の形式であるため、v-modelを使用することが好ましいこれらの例では、データの属性にアクセスするためにJavaScriptを使用できますが、データ属性を使用することができます。非フォームのもののために。たとえば、AJAXリクエストで使用されるURIのデータ属性は、テストサイトごとに異なる場合があります。