Rails + Vue：インスタンス変数へのアクセス

Question

私は単純なビューを持っていますが、Purchasebelongs to :clientです。したがって、purchasesにアクセスするには、client_idを提供する必要があります。 ：私はAjaxのリクエストでclient_idにアクセスするにはどうすればよい

$(document).ready(function() { 
    var purchases = new Vue({ 
    el: '#purchases', 
    data: { 
     purchases: [] 
    }, 
    ready: function() { 
     var that; 
     that = this; 
     $.ajax({ 
     url: 'clients/' + CLIENT_ID + '/purchases.json', // problem 
     success: function(res) { 
      console.log(res) 
      that.purchases = res; 
     } 
     }); 
    } 
    }); 
}); 

？私は<%= @client.id %>を試しましたが、エラーundefined method id 'for nil：NilClass`を取得します。

どのように変数を渡しますか？

Answer 1

質問に対する答えは、js関数で直接インスタンス変数にアクセスできないことです。これは、jsはブラウザ側でのみ動作するクライアント側言語であり、ruby/railsはサーバー側の言語であるためです。

jsの変数にアクセスできる唯一の方法は、htmlデータとして渡すことです。例えば、対応するhtml.erbファイルの隠しフィールドとして。

<%= hidden_field_tag('client_id', @client_id) %> 

とJSファイルに

client_id: $('#client_id').val() 

として、それをアクセスします。