0

tengo una duda, estoy intentando pasar una variable de un componente a otro, todo parece funcionar bien, pero dentro del evento del padre no me ejecuta un método.

No logro ver que estoy omitiendo y si pudieran ayudarme. Adjunto algunas imágenes para que puedan ver como si se actualiza mi variable.

Así inicia mi component como pueden ver la variable folder está vacía. introducir la descripción de la imagen aquí

<input-folder v-model="folder" :source.sync="folder" :input-field="false" class="" />

Y mi otro componente es el InputFolder

introducir la descripción de la imagen aquí

Pues selecciono el folder como muestra en la siguiente imagen introducir la descripción de la imagen aquí

Y como pueden observar después de darle seleccionar obtengo la ruta del directorio y lleno mi variable folder. Aquí es en el componente inputFolder introducir la descripción de la imagen aquí

Y aquí podemos observar como si me pasa la variable a mi componente padre introducir la descripción de la imagen aquí

La cual hago lo siguiente en el inputFolder:

methods: {
    select() {
      this.folder = decodeURI(this.$refs.finder.getSelected()[0]);
      this.$emit('input', this.folder);
      this.$emit('folder:selected', this.folder);
      this.$refs.finder.removeSelection();
      this.$refs.modal.close();
    },
 },

watch: {
  folder(folder) {
    this.$emit('input', folder);
  },
},

Y en mi otro componente

mounted() {
    this.$on('folder:selected', function(folder) {
       this.loadFolder(folder);
    });
},

Necesito que me ejecute el this.loadFolder ya que ahí llamo a una función en php y bueno obtengo las imágenes. Muchas gracias por leer esta duda, alguien podría orientarme por donde tengo el error? Gracias.

1 respuesta 1

0

Primero remueve esto de tu metodo select:

this.$emit('input', this.folder);

El watch se encarga de hacerlo ya que en la linea anterior le asignas valor a folder.

Segundo comentarea el this.$on del `mounted e intenta hacerlo a travez de html.

En tu código html del componente donde creas el input-folder:

<input-folder v-model="folder" :source.sync="folder" :input-field="false" class="" v-on:folder-selected="loadFolder" />

Y en el lugar donde emitias this.$emit('folder:selected' cambialo por this.$emit('folderSelected'

2
  • Muchas gracias Daniel, funcionó, removí el this.$emit de mi método select, pero en lugar de poner this.$emit('folderSelected, folder)' lo coloqué como this.$emit('folder-selected', folder), como en el v-on del html. Pero ya funcionó. Una pregunta, porque no detectaba en mi mounted? gracias.
    – Jopsa
    Commented el 13 jun. 2019 a las 22:43
  • echale un vistazo a este comentario tal vez pueda ayudarte github.com/nuxt/nuxt.js/issues/849#issuecomment-307016399 Commented el 14 jun. 2019 a las 13:02

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.