在.vue文件中渲染部分轨道

经过一段时间的努力后，我能够在我的Rails 4.2.5应用程序中使Vue与webpacker一起工作。这是我的第一个Vue项目，在使用它时我仍然不确定很多事情。在.vue文件中渲染部分轨道

我使用Buefy，它是基于Bulma CSS（https://buefy.github.io/#/documentation/tabs）的Vue.js组件。我有一些模式内的选项卡设置，我希望每个选项卡呈现一个不同的局部表单，但是，我不知道如何设置它作为Vue无法运行的Ruby代码。这段代码的结果是这些标签可以正常工作，但是我的Ruby呈现代码显示为一个字符串，并且没有运行。

我只能将部分的内容复制到vue.js文件中，但仍然有更多的红宝石在那里调用。我确信有一个正确的方法来做到这一点，但我无法弄清楚。

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

来源

2017-09-15 mochimantis

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

来源

2017-12-31 10:31:22

在.vue文件中渲染部分轨道

回答

相关问题