Hola tengo un componente en vue estoy usando rails 5, turbolink 5 y webpack.
Si el componente lo coloco directamente en la pagina donde hace el render una ruta por ejemplo new.html.erb, el componente carga Pero si quiero mostrar ese componente en un modal con bootstrap ya no me carga al parecer solo esta cargando el componente en el render inicial le dejo mi codigo
Este es el codigo donde cargo el componente desde un script
import Vue from 'vue/dist/vue.esm'
import MyComponent from '../app.vue'
import MultiText from '../components/multi_text.vue'
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter)
document.addEventListener('turbolinks:load', () => {
var element= document.getElementById("este");
if (element!=null) {
var vueapp = new Vue({
el: element,
components: { MultiText}
});
}
});
Obviamente en mi html coloco el div
<div id="este">
<multi-text
ruta-save-campos="<%= guardar_campos_proyectos_path(@proyecto) if @proyecto.id.present? %>"
campos-proyecto= "<%= @proyecto.campos.to_json if @proyecto.campos.present? %>" >
<multi-text/>
</div>
Pero si lo invoco desde un modal no funciona
---Actualizacion----- hice el import VUe y MultiText como ambito globales con las siguiente linea
window.Vue = Vue;
window.MultiText = MultiText;
Finalmente mi archivo quedo asi
import Vue from 'vue/dist/vue.esm'
import MyComponent from '../app.vue'
import MultiText from '../components/multi_text.vue'
window.Vue = Vue;
window.MultiText = MultiText;
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter)
document.addEventListener('turbolinks:load', () => {
var element= document.getElementById("este");
if (element!=null) {
var vueapp = new Vue({
el: element,
components: { MultiText}
});
}
});
De esta manera puedo usar tanto Vue como MultiText en cualquier pagina de mi aplicacion Rails.