Rails 5.1 APIをVueJS2で使用

Question

私は、jsonとしてレンダリングするリソースを持つ既存のRailsアプリケーションを持っています。私はjsonをチェックするためにPostmanを使いました。

私はvuejsをインストールするwebpackerの宝石を使用しました：

gem 'webpacker', '~> 3.0' 

その後：

続く

bundle exec rails webpacker:install 

：

bundle exec rails webpacker:install:vue 

私はその後、私の中に関連する新しいファイルを持っていますアプリ。

しかし、私はインデックスページでレンダリングするデータを取得していません。

index.html.rb

#other code removed 
<div id="roastslist"> 

    <table> 
    <thead> 
     <tr> 
     <th>Roast Name</th> 
     <th>Roaster</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr v-for="roast in roasts"> 
     <td>{{roast.name}}</td> 
     <td>{{roast.roaster}}</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 
#other code removed 

資産/ JavaScriptの/ roasts.js

var v = new Vue({ 
    el: '#roastslist', 
    data: { 
    roasts: [] 
    }, 
    mounted: function(){ 
    $.get('/roasts.json', function(data){ 
     v.roasts = data; 
    })} 
}) 

Answer 1

残念ながら、文書化されていないがそれは、実際にはかなり簡単です：

1. Webpackerを取り除く（不要な彼アダチェ、下記参照）
2. vue from the cdnを使用してください。それはキャッシュされており、あなたはそれに取り組んでいません。
が、これはでしょう、それは証明するために

を変更（および場合のみ）場合（オプション）JSONエンドポイントからのデータを更新したテンプレート 5にデータをレンダリングテンプレート

にあなたのjsのコードを移動

:javascript 
    var v = new Vue({ 
     el: '#roastslist', 
    data: { 
     roasts: "#{@rosts.to_json}" 
    } 

to_jsonをは（JSONなど）ローストをレンダリングするため、Vueので利用できるようにします：テンプレート内のコード（ジャバスクリプトフィルタ私はHAMLを使用し、それが持っている）こと。 to_jsonには多くのオプションがあります（：のみなど）が、十分でない場合は、私はrablを使用します。

jsコードが多すぎる場合は、別のファイルに移動したり、機能をアセットパイプラインに移動したりすることができます。

PS： はまた、my blog,を見て（目にやさしいながら）私はruby2jsを使用し、約半分で、コードサイズを縮小し、私は主題についての詳細を書くことについてです。

var element = document.getElementById('roastslist') 
    if (element != null) { 
    const v = new Vue({ 
     el: element, 
     data: { 
     roastslist: JSON.parse(element.dataset.rosts) 
     }, 
     template: "<roast-list :original_roasts='roastslist' />" 
    }) 
    } 
}) 

次に、あなたのroasts.jsに使用します：私は意味しoriginal_roastsにローストを変更

<tr v-for="roast in original_roasts"> 
    <td>{{roast.name}}</td> 
    <td>{{roast.roaster}}</td> 
    </tr> 

代わりのVueのを使用しての

Answer 2

はそうのようなあなたのデータとしてJSON.parseを試してみてください、マウント渡されたjsonオブジェクトまた、original_roastsは、同じjsonデータを使用する他のコンポーネントのprop配列として渡すこともできます。