在.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文件中渲染部分軌道

回答

相關問題