1
잠시 고생하고 난 후에 Vails를 Rails 4.2.5 앱의 webpacker와 함께 사용할 수있었습니다. 이것은 첫 번째 Vue 프로젝트이며, 아직 사용 중일 때 많은 것들을 확신 할 수 없습니다..vue 파일에 레일을 부분적으로 렌더링
저는 Bulma CSS (https://buefy.github.io/#/documentation/tabs)를 기반으로하는 Vue.js 구성 요소 인 Buefy를 사용하고 있습니다. 모달 내부에 탭 설정이되어 있고 각 탭에서 다른 부분에 대한 양식을 렌더링하고 싶지만 Vue가 루비 코드를 실행할 수 없으므로이를 설정하는 방법을 모르겠습니다. 이 코드의 결과는 탭이 제대로 작동하지만 Ruby 렌더링 코드가 문자열로 표시되어 실행되지 않는다는 것입니다.
partial의 내용을 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>