.vueファイルにレールを部分的にレンダリング

Question

しばらくの間苦労した後、私はVueをRails 4.2.5アプリでwebpackerと連携させることができました。これは私の最初のVueプロジェクトですが、私はまだそれを使用するときに多くのことがわかりません。

私はBulma CSS（https://buefy.github.io/#/documentation/tabs）に基づくVue.jsコンポーネントであるBuefyを使用しています。私はいくつかのタブをモーダルの内部に設定していますが、各タブで別の部分のフォームをレンダリングしたいのですが、Vueがルビコードを実行できないため、これを設定する方法はわかりません。このコードの結果、タブは正常に動作しますが、私のRubyレンダリングコードは文字列として表示され、実行されません。

私はパーシャルの内容をvue.jsファイルにコピーすることができますが、そこにはさらにルビーがあります。私はこのすべてを行う適切な方法があると確信していますが、私はそれを理解できません。ここで

はここ

モーダル

#buefy 
= javascript_pack_tag 'buefy_modal' 

を呼び出して、私のhtml/HAMLファイルはここに私のbuefy_modal.js

import Vue from 'vue' 
import App from './B_modal.vue' 
import Buefy from 'buefy' 

Vue.use(Buefy) 

new Vue({ 
    el: '#buefy', 
    render: h => h(App) 
}) 

とされているB_modal.vue

<template> 
    <section> 
    <button class="button is-primary is-medium" 
     @click="isCardModalActive = true"> 
     Social Save 
    </button> 
    <b-modal :active.sync="isCardModalActive" :width="640" has-modal-card> 
     <div class="card"> 
     <div class="card-content"> 
      <section> 
      <b-tabs v-model="activeTab"> 
       <b-tab-item label="Lists"> 
       <%=render partial: 'shared/list_item/list_form', locals: {media: @media} %> 
       </b-tab-item> 
       <b-tab-item label="Clubs"> 
       <%=render partial: 'shared/club_item/club_form', locals: {media: @media} %> 
       </b-tab-item> 
       <b-tab-item label="Challenges"> 
       <%=render partial: 'shared/challenge_item/challenge_form', locals: {media: @media} %> 
       </b-tab-item> 
      </b-tabs> 
      </section> 
     </div> 
     </div> 
    </b-modal> 
    </section> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       isCardModalActive: false, 
       activeTab: 0, 
      } 
     } 
    } 
</script> 

Answer 1

あるかもしれないしてみてくださいファイルの名前をsomething.vue.erbに変更する