经过一段时间的努力,我能够让 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>