C'est mon premier projet de Vue et je ne suis toujours pas sûr de beaucoup de choses quand je l'utilise. J'utilise Buefy, qui sont des composants de Vue.js basés sur le CSS de Bulma (https://buefy.github.io/#/documentation/tabs). J'ai installé des onglets à l'intérieur d'un modal et je veux que chaque onglet rende un formulaire pour un partiel différent, cependant, je ne sais pas comment le configurer, vu que Vue ne peut pas exécuter le code ruby. Le résultat de ce code est que les onglets fonctionnent correctement, mais mon code de rendu Ruby est affiché sous forme de chaîne et non exécuté.rendre un rails partielle dans un fichier .vue
Je pourrais simplement copier le contenu des partiels dans le fichier vue.js, mais il y a encore plus de rubis que j'appelle ici. Je suis sûr qu'il y a une bonne façon de faire tout cela, mais je ne peux tout simplement pas le comprendre.
Voici mon fichier html/haml appellent le modal
#buefy
= javascript_pack_tag 'buefy_modal'
Voici mes 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)
})
et voici le 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>