Ruby on rails 4 在.vue文件中呈现rails部分

经过一段时间的努力，我终于能够让Vue在我的Rails 4.2.5应用程序中使用webpacker。这是我的第一个Vue项目，在使用它时，我仍然对很多事情不确定

我使用的是Buefy，它是基于Bulma CSS（）的Vue.js组件。我在模式中设置了一些选项卡，我希望每个选项卡都为不同的部分呈现一个表单，但是，我不知道如何设置，因为Vue无法运行ruby代码。这段代码的结果是选项卡可以正常工作，但我的Ruby渲染代码显示为字符串，不运行

我可以将部分内容复制到vue.js文件中，但是我在那里调用了更多的ruby。我确信有一个合适的方法来做这一切，但我就是想不出来

这是我的html/haml文件，它调用modal

#buefy
= javascript_pack_tag 'buefy_modal'

这是我的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>

社会救助
导出默认值{
数据（）{
返回{
isCardModalActive:错误，
活动选项卡：0，
}
}
}

可能尝试将文件重命名为.vue.erb

如果要在文件中嵌入Ruby，则需要以

.erb

结尾，以便将

.erb

附加到文件名（将

.vue

保留在其中）。您还需要确保您的Vue加载程序配置（假设

config/webpacker/loaders/Vue.js

）也在查找

.Vue

文件（可选以

.erb

结尾）。