0

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.

1
  • Lo resolvi de la siguiente manera aunque no se si sea la mas apropiada . En mi archivo .js de package de webpack añadi mi componente y vue en ambito global con las siguientes lineas window.Vue = Vue; window.MultiText = MultiText; Con ello ya puedo usar de manera global en cualquier parte de mi aplicaccion mi componente asi como tambien llamar a Vue. No se si sea lo mas apropiado
    – HalleyRios
    Commented el 23 jun. 2018 a las 5:08

1 respuesta 1

0

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.