2

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

我正在使用 Buefy，它是基于 Bulma CSS ( https://buefy.github.io/#/documentation/tabs ) 的 Vue.js 组件。我在模态框内设置了一些选项卡，我希望每个选项卡为不同的部分呈现一个表单，但是，我不知道如何设置它，因为 Vue 无法运行 ruby​​ 代码。此代码的结果是选项卡正常工作，但我的 Ruby 渲染代码显示为字符串且未运行。

我可以将部分内容复制到 vue.js 文件中，但我还在其中调用了更多 ruby​​。我确信有一种正确的方法可以做到这一切，但我就是想不通。

这是我调用模态的 html/haml 文件

#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>
4

1 回答 1

1

也许尝试将文件重命名为 something.vue.erb

于 2017-12-31T10:31:22.407 回答