0

Buenas tengo un problema de comunicación entre componentes, quiero poner la pregunta aqui ya que no es tanto de solucionar mi problema como de enfocarlo. Voy a poneros en situación sobre el problema.
Tenemos una galeria de fotos que se muestran en filas de 3 columnas cada una.

foto-1 foto-2 foto-3
foto-4 foto-5 foto-6

Cada foto tiene un boton para borrarlo, al darle a ese boton aparece una confirmacion con 2 botones: OK y Cancelar(No hace falta describirlos).

Cada foto-n es un component hijo del component padre, es decir:

<component-padre>
  (bucle inicio)
    <component-foto><component-foto> //se repite n veces pero no es el mismo, sino que hay muchos.
  (bucle fin)
</component-padre>

Dicho todas estas aclaraciones voy a poner un caso de uso/ejemplo de donde tengo el problema:

Cuando clicko en borrar en un componente hijo (foto-n) me advierte si quiero borrarlo seguro (OK y cancelar). Si clicko en OK me borra la foto-n pero la foto-(n+1) ocupa ahora su lugar, entonces el estado de confirmacion de borrado esta activado aun siendo otro component, pero este coge el estado del que fue borrado. Pienso que es porque al haber ocupado la posicion del eliminado este cogera alguna info automaticamente, cabe destacar que el nombre de la foto-(n+1) y todo lo demas esta correcto, solo que aparece con la confirmacion en vez de aparecer el boton borrar como corresponderia.
¿Que solución le podria dar a esto?¿Aviso desde el padre a todo el bucle si es asi como seria la mejor forma?

Un saludo.

1 respuesta 1

0

Habria que ver la logica que aplicaron para el borrado y la actualizacion de variables, pero por lo que veo el problema puede ser algo mas sencillo.

A saber, la reactividad es a veces un poco confusa, y he tenido situaciones similares. En pincipio el componente padre que tiene los elementos tambien debe tener la logica de la eliminacion de estos, pero luego de confirmar la eliminacion de una imagen lo ideal seria hacer un reload del componente padre, de las multiples formas que hay de hacer esto puede que la mas sencilla sea usar una key.

<component-padre :key="arrayDeFotos.length">
  (bucle inicio)
  <component-foto><component-foto> //se repite n veces pero no es el mismo, sino que hay muchos.
  (bucle fin)
</component-padre>

de manera que cuando la foto sea eliminada del array (u objeto si fuese el caso), su tamaño cambia y eso hace que se vuelva a renderizar el componente (si se agregan imagenes tambien seria util volver a renderizar el componente padre), si esto no ayuda deberias mostrar la logica de los metodos y las variables relacionadas a los componentes para ver si el problema esta en otro lado.

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.