Estoy creando un sitio web de foro de discusión en VueJS, y una de las características que estoy creando es responder a los comentarios. Quiero tener un pequeño enlace/botón que diga "-Respondiendo a la publicación n.° 3", por ejemplo. Y cuando haga clic en ese enlace/botón, la página se desplazará hacia arriba hasta el comentario.

Todo esto es fácil de hacer, solo me aseguro de seleccionar el div de comentario al que se responde con

comm = document.querySelectorAll(".comment")

luego, cuando hace clic en el botón para ver el comentario respondido, corro

 this.comm.scrollIntoView({ block: 'start', behavior: 'smooth', inline: 'start' });

Todo esto funciona bien para mí, el problema es que estoy tratando de usar Firebase para almacenar mis datos para los objetos de comentarios. En este momento creo un objeto de comentario así:

 var tempCommentObj = { commentName: this.name, commentReply: "-Replying to post no." + this.cArr.commentID, commentText: this.text, //more declarations commentReplyDiv: commR //commR being the comment element in question }

Luego lo inserto en la matriz de comentarios de esta this.actualArr.push(tempCommentObj);

Así que quiero tener un elemento HTML como elemento en mi objeto para poder desplazarme hacia arriba más tarde cuando presione el botón. Sin embargo, firebase no le permite almacenar Elementos, solo cadenas, números, objetos, fechas, etc. pero no Elementos.

Así que traté de encadenar con String() el elemento para poder almacenarlo como una cadena en la base de datos, luego desarmarlo más tarde cuando quiera presionar el botón. Y en realidad recupero lo correcto

<div class="comment" data-v-133ed8df>...</div> Pero es solo una copia del elemento y no el elemento real, así que cuando trato de desplazarme a la vista no hace nada.

Tiene que haber una mejor manera de hacer esto, agradecería el conocimiento de alguien.

(También intenté obtener la posición y del elemento usando getBoundingClientRect() y hacerlo de esa manera, pero por alguna razón, nunca funcionó, y cuanto más abajo en la página, más negativo sería y. Tal vez ese sea el forma más inteligente de hacer esto, pero no pude hacerlo funcionar)